#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 a label prop is not provided, an aria-label or aria-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 or aria-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
Copyright © 2020 Jake Moxey