🚧 This website is work in progress 👷
Components
Forms
RadioButton
Published

RadioButton

RadioButtons allow the user to select one option from a set.

Import statement

import { RadioButton } from "@wfp/react"

Grouping

Horizontal

Expand code

Editable Example

<InputGroup
  labelText="Input group"
  helperText="Describing the input group"
>
  <RadioButton
    id="check-1"
    name="radio-horizontal"
    labelText="Option 1"
    value="option1"
  />
  <RadioButton
    id="check-2"
    name="radio-horizontal"
    labelText="Option 2"
    value="option2"
  />
  <RadioButton
    id="check-3"
    name="radio-horizontal"
    labelText="Option 3"
    value="option3"
  />
</InputGroup>;

Vertical

Expand code

Editable Example

<InputGroup
  labelText="Input group"
  helperText="Describing the input group"
  vertical
>
  <RadioButton
    name="radio-vertical"
    labelText="Option 1"
    value="option1"
  />
  <RadioButton
    name="radio-vertical"
    labelText="Option 2"
    value="option2"
  />
  <RadioButton
    name="radio-vertical"
    labelText="Option 3"
    value="option3"
  />
</InputGroup>;
Expand code

Editable Example

const FormExample = () => {
  const [defaultValues, setDefaultValues] = useState(
    {}
  );
  const {
    control,
    register,
    handleSubmit,
    watch,
    reset,
  } = useForm({ defaultValues });
  const [data, setData] = useState({});

  const setDefaultValuesFunc = (e) => {
    console.log(e.target.value);
    try {
      const values = JSON.parse(e.target.value);
      setDefaultValues(values);
    } catch (e) {
      console.log(e);
    }
  };

  const resetInputs = () => {
    reset(defaultValues);
  };
  const currentValues = watch();

  return (
    <>
      <form
        onSubmit={handleSubmit((data) =>
          setData(data)
        )}
      >
        <InputGroup
          labelText="Input group"
          helperText="Describing the input group"
        >
          <RadioButton
            name="radio-1"
            value="option-1"
            labelText="Option 1"
            {...register("radio")}
          />
          <RadioButton
            name="radio-2"
            value="option-2"
            labelText="Option 2"
            {...register("radio")}
          />
        </InputGroup>
        <Button type="submit">Submit</Button>{" "}
        <Button onClick={resetInputs} kind="secondary">
          Reset here
        </Button>
        <div className="debug">
          <h4>Submitted form data</h4>
          <pre>{JSON.stringify(data, null, 2)}</pre>

          <h4>Current values</h4>
          <pre>
            {JSON.stringify(currentValues, null, 2)}
          </pre>

          <TextInput
            labelText="Default values (editable)"
            defaultValue={JSON.stringify(
              defaultValues
            )}
            onChange={setDefaultValuesFunc}
          />
        </div>
      </form>
    </>
  );
};

render(<FormExample />);

Behaviour

Checkbox States

The checkbox control allows for three states: selected, unselected, and indeterminate. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.

Actions

Click target

Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.

Default selection

The default view of a set of checkboxes is having no option selected.

Formatting

  • Checkbox input(1): It indicates the checkbox state. By default it is set to unselected.

  • Checkbox label(2): Describes the information you want to select or unselect.

Related

RadioButton

Reference

Carbon Design System Usage for checkboxes

On this page

References