@volvo-cars/react-forms

Questions? Ask in Slack #vcc-ui

Applies class names from @volvo-cars/css.

Checkbox

Checkboxes allow the user to toggle an option on or off.

The Checkbox component renders an <input type="checkbox"> with a <label> and an optional hint.

Unlike the VCC UI Checkbox, it can be used both as a controlled or uncontrolled component.

Examples

<Checkbox name="check" id="check-1" label="Checkbox" defaultChecked />

() => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Checkbox
      name="check"
      id="check-2"
      label="Checkbox"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
};

Invalid state

<Checkbox
  name="check"
  id="check-2"
  label="Checkbox"
  hint="Please check"
  aria-invalid
  required
/>

Radio

Radios allow the user to select a single option from a group. Radios are designed to be used with the RadioGroup component.

The Radio component renders an <input type="radio"> with a <label> and an optional hint.

Unlike the VCC UI Radio, it can be used both as a controlled or uncontrolled component.

Examples

<Radio name="radio" id="radio-1" label="Radio" defaultChecked />

RadioGroup

Radio groups are used to group multiple radios in a single form control.

The Radio component renders a <fieldset> with a <legend>, an optional hint and the child radio inputs.

It can also set the disabled, required and name props for it's child radio inputs.

Example

<RadioGroup
  legend="Choose your terms"
  name="terms"
  onChange={(event) => console.log(event.target.value)}
  hint="Select your terms"
  required
>
  <Radio id="terms-6000" value="6000" label="6000 km/yr" />
  <Radio id="terms-8000" value="8000" label="8000 km/yr" />
</RadioGroup>