Radio

View Source

Use radios to present a list of options where users can only make a single selection.

Peach

Watermelon

Orange

Copy

Edit

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio name="radio" value="peach" label="Peach" />
    <Radio name="radio" value="watermelon" label="Watermelon" />
    <Radio name="radio" value="orange" label="Orange" />
  </StackView>
)

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio name="radio" value="peach" label="Peach" />
    <Radio name="radio" value="watermelon" label="Watermelon" />
    <Radio name="radio" value="orange" label="Orange" />
  </StackView>
)

Apple

Banana

Kiwi

Copy

Edit

render(
  <ThemeProvider
    theme={{
      radio: {
        fill: 'lightpink',
        stroke: 'hotpink',
        focusStroke: 'hotpink',
        checkedFill: 'hotpink',
        checkedStroke: 'hotpink',
      },
    }}
  >
    <StackView axis="horizontal" spacing={3}>
      <Radio name="theme-radio" value="apple" label="Apple" />
      <Radio name="theme-radio" value="banana" label="Banana" />
      <Radio name="theme-radio" value="kiwi" label="Kiwi" />
    </StackView>
  </ThemeProvider>
)

render(
  <ThemeProvider
    theme={{
      radio: {
        fill: 'lightpink',
        stroke: 'hotpink',
        focusStroke: 'hotpink',
        checkedFill: 'hotpink',
        checkedStroke: 'hotpink',
      },
    }}
  >
    <StackView axis="horizontal" spacing={3}>
      <Radio name="theme-radio" value="apple" label="Apple" />
      <Radio name="theme-radio" value="banana" label="Banana" />
      <Radio name="theme-radio" value="kiwi" label="Kiwi" />
    </StackView>
  </ThemeProvider>
)

Props

disabledboolean

Disables the radio component.

labelstring

Determines if the radio should use an internal label or not.

checkedboolean

Checks the radio.

namestring

Maps to the internal input’s name prop.

valuemixed

Maps to the internal input’s value prop.

size'xs' | 'sm' | 'md' | 'lg' | 'xl'

Determines the size of the radio based on a scale.

onChange() => null

Maps to the internal input’s onChange prop.

onFocus() => null

Maps to the internal input’s onFocus prop.

onBlur() => null

Maps to the internal input’s onBlur prop.

Props

PreviousNumberField NextRangeSlider