Tapestry-React

Github

Radio

View Source

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

Peach

Watermelon

Orange

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>
)

Error

Disabled

Disabled and Checked

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio error name="radio" value="error" label="Error" />
    <Radio disabled name="radio" value="disabled" label="Disabled" />
    <Radio
      checked
      disabled
      name="radio"
      value="disabled_and_checked"
      label="Disabled and Checked"
    />
  </StackView>
)

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio error name="radio" value="error" label="Error" />
    <Radio disabled name="radio" value="disabled" label="Disabled" />
    <Radio
      checked
      disabled
      name="radio"
      value="disabled_and_checked"
      label="Disabled and Checked"
    />
  </StackView>
)

Extra Small

Small

Medium

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio name="radio" value="xs" size="xs" label="Extra Small" />
    <Radio name="radio" value="sm" size="sm" label="Small" />
    <Radio name="radio" value="md" size="md" label="Medium" />
  </StackView>
)

render(
  <StackView axis="horizontal" spacing={3}>
    <Radio name="radio" value="xs" size="xs" label="Extra Small" />
    <Radio name="radio" value="sm" size="sm" label="Small" />
    <Radio name="radio" value="md" size="md" label="Medium" />
  </StackView>
)

Apple

Banana

Kiwi

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

Accepts StackView props.

checkedboolean

Checks the radio.

disabledboolean

Disables the radio component.

errorboolean

Determines if the radio should display an error state.

idstring | number

Connects input to its corresponding label’s htmlFor.

labelReactNode

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

namestring

Maps to the internal input’s name prop.

onBlur(event: React.FocusEvent<HTMLInputElement>) => void

Maps to the internal input’s onBlur prop.

onChange(event: React.ChangeEvent<HTMLInputElement>) => void

Maps to the internal input’s onChange prop.

onFocus(event: React.FocusEvent<HTMLInputElement>) => void

Maps to the internal input’s onFocus prop.

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

Determines the size of the radio based on a scale.

valueComponentProps['value']

Maps to the internal input’s value prop.

Props

PreviousNumberField NextRangeSlider