Radio Button

The Radio Button component allows users to select a single option from a group.

Usage

Default


  const options = ["a", "b", "c"];

  const [selected, setSelected] = useState("b");

  <div style={{ display: "flex", gap: "1rem" }}>
          {options.map((opt) => (
            <RadioButton
              key={opt}
              theme="secondary"
              label={Option}
              value={opt}
              checked={selected === opt}
              onChange={setSelected}
            />
          ))}
  </div>

Props

Data table
TypeDescription
aria-describedbystringIdentifies the element (or elements) that describe this radio button.
aria-invalidboolean | "true" | "false"Marks the radio button as invalid for accessibility.
aria-labelstringProvides an accessible label when no visible label is present.
aria-labelledbystringIdentifies the element (or elements) that label this radio button. Usually not needed when using the built-in `label` prop, but available for advanced cases.
aria-requiredboolean | "true" | "false"Indicates whether this radio button is required as part of a group.
checkedbooleanWhether this radio button is currently checked.
classNamestringAdditional CSS class names for custom styling.
data-testidstringOptional test ID for testing frameworks.
disabledbooleanWhether the radio button is disabled.
labelstringThe label text displayed next to the radio button.
onChange(value: string) => voidCallback triggered when the radio button's value changes.
roundingRoundingTypeRounding of the radio button. One of: "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeShadow style of the radio button. One of: "none" | "light" | "medium" | "strong" | "intense"
stateStateTypeState of the radio button. One of: "success" | "error" | "warning" | "disabled" | ""
themeThemeTypeTheme applied for styling. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear"
valuestringThe value associated with this radio button.