RadioGroup#

A <RadioGroup> can be used to render a set of Radio components.

Import#

import { RadioGroup } from 'bumbag'

Usage#

Sunny

Windy

Overcast

Editable example

<RadioGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Fields#

You can also use the <RadioGroupField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of RadioGroup props and FieldWrapper props.

What's the weather?

Sunny

Windy

Overcast

Editable example

<RadioGroupField
  label="What's the weather?"
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroupField
  label="What's the weather?"
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Horizontal group#

Sunny

Windy

Overcast

Editable example

<RadioGroup
  orientation="horizontal"
  name="weather2"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  orientation="horizontal"
  name="weather2"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Disabled#

You can disable a radio group with the disabled prop. If you only want to disable one option, add the disabled: true attribute to the option.

Sunny

Windy

Overcast

Editable example

<RadioGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy', disabled: true },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy', disabled: true },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Sunny

Windy

Overcast

Editable example

<RadioGroup
  disabled
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  disabled
  name="weather"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

States#

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

Sunny

Windy

Overcast

Editable example

<RadioGroup
  state="danger"
  name="weather4"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  state="danger"
  name="weather4"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Default value#

Specify a default checked value with the defaultValue prop.

Sunny

Windy

Overcast

Editable example

<RadioGroup
  defaultValue="overcast"
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

<RadioGroup
  defaultValue="overcast"
  name="weather5"
  options={[
    { label: 'Sunny', value: 'sunny' },
    { label: 'Windy', value: 'windy' },
    { label: 'Overcast', value: 'overcast' }
  ]}
/>

Controlled Usage#

The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of onChange and value.

Note: Do not use defaultValue with controlled inputs!

Sunny

Windy

Overcast

Editable example

function Example() {
  const [value, setValue] = React.useState('');

  return (
    <RadioGroup
      options={[
        { label: 'Sunny', value: 'sunny' },
        { label: 'Windy', value: 'windy' },
        { label: 'Overcast', value: 'overcast' }
      ]}
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState('');

  return (
    <RadioGroup
      options={[
        { label: 'Sunny', value: 'sunny' },
        { label: 'Windy', value: 'windy' },
        { label: 'Overcast', value: 'overcast' }
      ]}
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  )
}

Accessibility#

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

Patterns#

The outer wrapper of the group has a role of radiogroup.
The radio has a role of radio.
Pressing Tab and Shift + Tab moves focus in and out of the radio group.
Pressing Space checks the selected radio button.
Pressing Up, Down, Left or Right will move the current selection to the next or previous item.

References#

WAI ARIA RadioGroup Pattern

Props#

RadioGroup Props#

defaultValue string

Default value of the radio group

disabled boolean

Disables the radio group

name string Required

orientation "horizontal" | "vertical"

Are the radio inputs layed out horizontally?

options RadioProps[] Required

Radio group options

spacing string

state string

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

value string

Controlled value of the radio group

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

Function to invoke when radio group has changed

RadioGroupField Props#

radioGroupProps

Pick<BoxProps, "unstable_system"
  | "top"
  | "right"
  | "bottom"
  | "left"
  | "children"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | ... 779 more ...
  | "themeKey"> & LocalRadioGroupProps

Additional props for the RadioGroup component

Inherits RadioGroup props

defaultValue string

Default value of the radio group

disabled boolean

Disables the radio group

name string Required

orientation "horizontal" | "vertical"

Are the radio inputs layed out horizontally?

options RadioProps[] Required

Radio group options

spacing string

state string

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

value string

Controlled value of the radio group

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

Function to invoke when radio group has changed

Inherits FieldWrapper props

children

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

label

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the label on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

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

themeKey string

Theming#

RadioGroup.styles.base

Sunny

Windy

Overcast

Radio.styles.base

Sunny

Windy

Overcast

Radio.Icon.styles.base

Sunny

Windy

Overcast

Radio.Label.styles.base

Sunny

Windy

Overcast

Radio.HiddenInput.styles.base

Sunny

Windy

Overcast

On this page