Radio Button

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

Usage & Examples

Default

default.tsx

    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 API

22 props
Columns
Radio Button props API
Default
Description
aria-describedbystringNoariaIdentifies the element (or elements) that describe this radio button.
aria-invalidboolean | "true" | "false"NoariaMarks the radio button as invalid for accessibility.
aria-labelstringNoariaProvides an accessible label when no visible label is present.
aria-labelledbystringNoariaIdentifies 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"NoariaIndicates whether this radio button is required as part of a group.
checkedbooleanYespropsWhether this radio button is currently checked.
classNamestringNostylingAdditional CSS class names for custom styling.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseWhether the radio button is disabled.
errorMessageReactNodeNoprops-
helperTextReactNodeNoprops-
invalidbooleanNoprops-