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-describedbystringNoaria—Identifies the element (or elements) that describe this radio button.
aria-invalidboolean | "true" | "false"Noaria—Marks the radio button as invalid for accessibility.
aria-labelstringNoaria—Provides an accessible label when no visible label is present.
aria-labelledbystringNoaria—Identifies 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"Noaria—Indicates whether this radio button is required as part of a group.
checkedbooleanYesprops—Whether this radio button is currently checked.
classNamestringNostyling—Additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseWhether the radio button is disabled.
errorMessageReactNodeNoprops—-
helperTextReactNodeNoprops—-
invalidbooleanNoprops—-