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

19 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.
glassbooleanNopropsconfigured default glass setting (fallback: false)Applies a translucent frosted-glass treatment to the visible radio control.
labelReactNodeNoprops—The label text displayed next to the radio button.
labelPosition"left" | "right"Noprops"left"Position of the label relative to the radio button.