Radio Button

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

Usage

Default

Option AOption BOption C


  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

Sortable data table
Prop	Type	Default	Description
label	string	-	Label displayed next to the radio button.
value	string	-	The value for the radio button input.
checked	boolean	-	Determines if the radio button is selected.
onChange	(value: string) => void	-	Callback fired when the selected value changes.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme variant for styling the radio button.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius applied to the radio button.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow depth applied to the radio button.
state	"success" \| "error" \| "warning"	-	Visual state (e.g., success, error, warning) for styling.
disabled	boolean	false	Disables the radio button if true.
className	string	-	Custom class name for the wrapper element.
data-testid	string	"radio-button"	Test ID for selecting the component in tests.