#Overview

Selectors are an alternative way to showcase Radio Button, Checkbox, Button or Link. They can represent a wide variety of content and it is up to the individual teams how that content inside the selectors is represented.

#Selector Radio Button

Selector Radio Buttons are used with Forms (Code).

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

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

  const options = {
    required: false,
  };

  return (
    <form onSubmit={form.handleSubmit(() => {})}>
      <Fieldset>
        <FieldsetLegend>Which fruit are your favourite?</FieldsetLegend>
        <Wrapper role="presentation">
          {fruit.map((item) => (
            <SelectorRadioButtonField
              key={item.value}
              form={form}
              name="option"
              value={item.value}
              options={options}
            >
              {item.label}
            </SelectorRadioButtonField>
          ))}
        </Wrapper>
        <FieldHelpText form={form} name="option" />
      </Fieldset>
      <Button type="submit">Submit</Button>
    </form>
  );
};

#Outside of a form

#Selector Checkbox

Selector Checkboxes are used with Forms (Code).

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

export const SelectorCheckboxFieldsDemo = () => {
  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>
        <Wrapper role="presentation">
          {fruit.map(({ label, value }) => (
            <SelectorCheckboxField
              key={value}
              form={form}
              name="fruit"
              value={value}
              defaultChecked={value === "apricot"}
              options={{ validate, required: false }}
            >
              {label}
            </SelectorCheckboxField>
          ))}
        </Wrapper>
        <FieldHelpText form={form} name="fruit">
          Select between one and three fruits
        </FieldHelpText>
      </Fieldset>
      <Button type="submit">Submit</Button>
    </form>
  );
};

#Outside of a form

#Selector Button

#Selector Link

#Colors

#Selector Checkbox / Radio Button

• Token
• BOX#fff#111#fff#111
• BOX_ACTIVE#fff#111#fff#111
• BOX_BORDER#ddd#fff4#dee#556
• BOX_BORDER_ACTIVE#555#fc2#059#6bf
• BOX_BORDER_ERROR#e64#f75#e02#f55
• BOX_BORDER_FOCUS#07c#7cf#e02#f55
• BOX_BORDER_HOVER#000#fff#e02#f55
• BOX_ERROR#fff#111#fff#111
• BOX_FOCUS#fff#111#fff#111
• BOX_HOVER#fff#111#fff#111
• TEXT_ERROR#f75#f75#e02#f55
• TIME_TEXT#000#fff#059#6bf
• TIME_TEXT_ACTIVE#000#fff#059#6bf
• TIME_TEXT_ERROR#000#fff#059#6bf
• TIME_TEXT_FOCUS#000#fff#e02#f55
• TIME_TEXT_HOVER#000#fff#e02#f55

#Selector Button

• Token
• BUTTON#fff#111#fff#111
• BUTTON_ACTIVE#fff#111#fff#111
• BUTTON_BORDER#ddd#fff4#dee#556
• BUTTON_BORDER_ACTIVE#555#fc2#059#6bf
• BUTTON_BORDER_ERROR#e64#f75#e02#f55
• BUTTON_BORDER_FOCUS#07c#7cf#e02#f55
• BUTTON_BORDER_HOVER#000#fff#e02#f55
• BUTTON_ERROR#fff#111#fff#111
• BUTTON_FOCUS#fff#111#fff#111
• BUTTON_HOVER#fff#111#fff#111
• TEXT_ERROR#f75#f75#e02#f55
• TIME_TEXT#000#fff#059#6bf
• TIME_TEXT_ACTIVE#000#fff#059#6bf
• TIME_TEXT_ERROR#000#fff#059#6bf
• TIME_TEXT_FOCUS#000#fff#e02#f55
• TIME_TEXT_HOVER#000#fff#e02#f55

#Selector Link

• Token
• LINK#fff#111#fff#111
• LINK_ACTIVE#fff#111#fff#111
• LINK_BORDER#ddd#fff4#dee#556
• LINK_BORDER_ACTIVE#555#fc2#059#6bf
• LINK_BORDER_ERROR#e64#f75#e02#f55
• LINK_BORDER_FOCUS#07c#7cf#e02#f55
• LINK_BORDER_HOVER#000#fff#e02#f55
• LINK_ERROR#fff#111#fff#111
• LINK_FOCUS#fff#111#fff#111
• LINK_HOVER#fff#111#fff#111
• TEXT_ERROR#f75#f75#e02#f55
• TIME_TEXT#000#fff#059#6bf
• TIME_TEXT_ACTIVE#000#fff#059#6bf
• TIME_TEXT_ERROR#000#fff#059#6bf
• TIME_TEXT_FOCUS#000#fff#e02#f55
• TIME_TEXT_HOVER#000#fff#e02#f55