#Overview

Checkboxes are used with Forms (Code).

#Single Checkbox

Use the <SingleCheckboxField /> to answer a simple “yes” or “no” question inside a form.

export const SingleCheckboxFieldDemo = () => {
  const form = useForm<{ isChecked: boolean }>();
  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <SingleCheckboxField
        form={form}
        name="isChecked"
        options={{
          required: { value: true, message: "Please check the above box" },
        }}
      >
        Check this Box
      </SingleCheckboxField>
      <Button type="submit">Submit</Button>
    </form>
  );
};

#Multiple Checkboxes

Use a Selector for more complex checkbox content inside a form. If that is not possible (e.g. for competitions in editorial content) use several <CheckboxField /> components together.

Multiple Checkboxes 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 Checkboxes.

export const CheckboxFieldsDemo = () => {
  const form = useForm<{ fruit: string[] }>();

  const validate = () => {
    const values = form.getValues("fruit");
    const amount = Array.isArray(values) ? values.length : values ? 1 : 0;
    if (amount < 1) {
      return "Select at least one fruit";
    }
    if (amount > 3) {
      return "Not more than 3 fruits";
    }
    return true;
  };

  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <Fieldset>
        <FieldsetLegend>Which fruit are your favourite?</FieldsetLegend>
        {fruit.map(({ label, value }) => (
          <CheckboxField
            key={value}
            form={form}
            name="fruit"
            value={value}
            options={{ validate, required: false }}
          >
            {label}
          </CheckboxField>
        ))}
        <FieldHelpText form={form} name="fruit">
          Select between one and three fruits
        </FieldHelpText>
      </Fieldset>
      <Button type="submit">Submit</Button>
    </form>
  );
};

#Outside of a form

If there is no need to submit a form, consider using a Toggle Switch. If more granular control is needed <Checkbox /> can be used directly.

#Colors

• Token
• BORDER_FOCUS#0003#fff4#0003#fff4
• BORDER_FOCUS_ERROR#0003#fff4#0003#fff4
• BORDER_FOCUS_SELECTED#0003#fff4#0003#fff4
• CHECKBOX_BORDER#bbb#fff#bbb#fff
• CHECKBOX_BORDER_DISABLED#0000#fff#bbb#fff
• CHECKBOX_BORDER_ERROR#e64#f75#e02#f55
• CHECKBOX_BORDER_FOCUS#bbb#fff#bbb#fff
• CHECKBOX_BORDER_FOCUS_ERROR#e64#f75#e02#f55
• CHECKBOX_FOCUS_SELECTED#555#fff#059#fff
• CHECKBOX_SELECTED#555#fff#059#fff
• CHECKBOX_SELECTED_DISABLED#555#fff#059#fff
• CHECKBOX_UNCHECKED_BACKGROUND_DISABLED#fff#0000#0000#0000
• CHECKBOX_UNCHECKED_BORDER_DISABLED#bbb#0000#0000#0000
• ICON_SHAPE_FOCUS_SELECTED#fff#111#fff#111
• ICON_SHAPE_SELECTED#fff#111#fff#111
• ICON_SHAPE_SELECTED_DISABLED#fff#111#fff#111
• 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
• MARK_FOCUS_SELECTED#fff#111#fff#111
• MARK_SELECTED#fff#111#fff#111
• MARK_SELECTED_DISABLED#fff#111#fff#111