Radio#
Checkboxes are used when a user needs to at most one value from a series of options.
Import#
import { Radio } from 'bumbag'
Usage#
Disabled#
Make the checkbox disabled with the disabled
prop.
States#
A checkbox can use different states (as per palette) such as danger
, success
and warning
.
Accessibility#
The <Radio>
component follows the WAI ARIA Radio Pattern.
Rules#
- The Radio must have a
label
prop to identify it's label. If alabel
prop is not provided, anaria-label
oraria-labelledby
prop can be specified.
Patterns#
- The radio has a role of
radio
. - The radio has an accessible label specified via the
label
,aria-labelledby
oraria-label
prop. - When the radio has focus, pressing the Space key changes the state of the radio.
References#
Props#
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
Theming#
Radio.styles.base
Radio.Icon.styles.base
Radio.Label.styles.base
Radio.HiddenInput.styles.base