Radio#

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

Import#

import { Radio } from 'bumbag'

Usage#

<Radio label="Check me" />

Disabled#

Make the checkbox disabled with the disabled prop.

<Radio disabled label="Click me" />
<Radio checked disabled label="Click me" />

States#

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

<Radio state="danger" label="Click me" />
<Radio state="success" label="Click me" />
<Radio state="warning" label="Click me" />
<Radio state="primary" label="Click me" />

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#

• WAI ARIA Radio Pattern

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#

import { ThemeProvider } from 'bumbag';
const theme = {
  Radio: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Radio: {
    Icon: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Radio: {
    Label: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Radio: {
    HiddenInput: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>