Checkboxes are used when a user needs to at most one value from a series of options.


import { Radio } from 'bumbag'


Editable example


Make the checkbox disabled with the disabled prop.

Editable example


A checkbox can use different states (as per palette) such as danger, success and warning.

Editable example


The <Radio> component follows the WAI ARIA Radio Pattern.


  • The Radio must have a label prop to identify it's label. If a label prop is not provided, an aria-label or aria-labelledby prop can be specified.


  • The radio has a role of radio.
  • The radio has an accessible label specified via the label, aria-labelledby or aria-label prop.
  • When the radio has focus, pressing the Space key changes the state of the radio.



#Radio Props

autoFocus boolean

Automatically focus on the radio

checked boolean

radioProps InputHTMLAttributes<any>

defaultChecked boolean

Is the radio checked by default?

disabled boolean

Disables the radio

isRequired boolean

Makes the radio required and sets aria-invalid to true

label string

Radio label

name string

radioRef ((instance: any) => void) | RefObject<any>

state string

State of the radio. Can be any color in the palette.

value string | boolean

Initial value of the radio

onBlur (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when focus is lost

onChange (event: FormEvent<HTMLInputElement>) => void

Function to invoke when radio has changed

onFocus (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when radio is focused


On this page
Copyright © 2021 Jake Moxey