Radio Button - Components - Design System

#Overview

Radio Buttons are used with Forms (Code).

Radio Buttons have to be grouped with a <Fieldset /> and labelled with a <FieldsetLegend /> to make them accessible. The <FieldHelpText /> displays a validation message and help text related to the Radio Buttons.

Show codeHide code

export const RadioButtonFieldDemo = () => {
  const form = useForm<{ option: string }>();

  const options = {
    required: { value: true, message: "Please choose one option" },
  };
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <Fieldset>
        <FieldsetLegend>Please choose an option</FieldsetLegend>
        {items.map((item) => (
          <RadioButtonField
            key={item.value}
            form={form}
            name="option"
            defaultChecked={item.value === "option2"}
            value={item.value}
            options={options}
          >
            {item.label}
          </RadioButtonField>
        ))}
        <FieldHelpText form={form} name="option" />
      </Fieldset>
      <Button type="submit">Submit</Button>
    </form>
  );
};

Name	Type	Default	Description
children *	`ReactNode`	-	The label of the checkbox
form *	`UseFormReturn<TFieldValues>`	-	The connected form that the form field is part of
name *	`TFieldName`	-	The name of the input being registered from the form
value *	`PathValueImpl<TFieldValues, TFieldName>`	-	the unique value of the radio button
defaultChecked	`boolean`	-	If true, the checkbox is checked initially, for uncontrolled mode, mutually exclusive with `checked`
disabled	`boolean`	`false`	If true, the checkbox is disabled
hasError	`boolean`	`false`	If true, the checkbox becomes outlined in red
onChange	`ChangeEventHandler<HTMLInputElement>`	-	The change event handler
options	`Pick<RegisterOptions<TFieldValues, TFieldName>, "required">`	`{ required: { value: true, message: __("Required") } }`	The options that can be set for the registration of the field

#Without a form

Name	Type	Default	Description	Controls
children *	`ReactNode`	-	The label of the radio button
checked	`boolean`	-	If true, the radio button is checked, mutually exclusive with `defaultChecked`
defaultChecked	`boolean`	-	If true, the radio button is checked initially, for uncontrolled mode, mutually exclusive with `checked`
disabled	`boolean`	`false`	If true, the radio button is disabled
hasError	`boolean`	`false`	If true, the radio button becomes outlined in red
onChange	`ChangeEventHandler<HTMLInputElement>`	-	The change event handler	-

#Example

import { RadioButton } from "@blocks/form";

export const CoupleOfRadios = () => {
  const [checked, setChecked] = useState<number | null>(null);
  return (
    <>
      <RadioButton checked={checked === 1} onChange={() => setChecked(1)}>
        Text content
      </RadioButton>
      <br />
      <RadioButton checked={checked === 2} onChange={() => setChecked(2)}>
        Text content
      </RadioButton>
    </>
  );
};

#Colors

Token
BORDER_FOCUS#0003#fff4#0003#fff4
BORDER_FOCUS_ERROR#0003#fff4#0003#fff4
BORDER_FOCUS_SELECTED#0003#fff4#0003#fff4
LABEL_TEXT#000#fff#000#fff
LABEL_TEXT_DISABLED#000#fff#000#fff
LABEL_TEXT_ERROR#000#fff#000#fff
LABEL_TEXT_FOCUS#000#fff#000#fff
LABEL_TEXT_FOCUS_ERROR#000#fff#000#fff
LABEL_TEXT_FOCUS_SELECTED#000#fff#000#fff
LABEL_TEXT_SELECTED#000#fff#000#fff
LABEL_TEXT_SELECTED_DISABLED#000#fff#000#fff
RADIO_BORDER#bbb#fff#bbb#fff
RADIO_BORDER_DISABLED#bbb#fff#bbb#fff
RADIO_BORDER_ERROR#e64#f75#e02#f55
RADIO_BORDER_FOCUS#bbb#fff#bbb#fff
RADIO_BORDER_FOCUS_ERROR#e64#f75#e02#f55
RADIO_FOCUS_SELECTED#555#fff#059#fff
RADIO_SELECTED#555#fff#059#fff
RADIO_SELECTED_DISABLED#555#fff#059#fff
RADIO_SELECTOR_FOCUS_SELECTED#fff#111#fff#111
RADIO_SELECTOR_SELECTED#fff#111#fff#111
RADIO_SELECTOR_SELECTED_DISABLED#fff#111#fff#111

#Overview

#Without a form

#Example

#Colors

About us