Checkbox

<Fieldset label="Hvilke sparkesykler vil du se i kartet?">
  <Checkbox>Tier</Checkbox>
  <Checkbox>Voi</Checkbox>
  <Checkbox>Zvipp</Checkbox>
</Fieldset>

Bruk Checkbox når

Brukes når det er en liste over alternativer, og brukeren kan velge ett eller flere av dem.

Unngå Checkbox når

brukeren bare kan velge ett alternativ fra listen, bruk heller RadioButton
valget skal gjenspeiles eller lagres med en gang, bruk heller Switch

Retningslinjer

En checkbox skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende label-tekst, og bør aldri stå alene.

Indeterminate

Det finnes tilfeller der en checkbox hverken er på eller av. Det er typisk når man bruker en checkbox til å velge en rekke andre checkboxes.

Gjør

Dersom det er mange checkboxes, list dem under hverandre i en kolonnegruppe, slik at det er enkelt for brukeren å skanne raskt gjennom listen.

Unngå

Unngå å plassere checkboxes i flere kolonner.

Eksempler

Indeterminate
() => {
    const [selectedItems, setSelectedItems] = React.useState({
      Buss: false,
      Tog: false,
      Båt: false,
      Fly: false,
      Sykkel: false,
      Sparkesykkel: false,
    });
    const isEverythingSelected = Object.values(selectedItems).every(
      value => value,
    );
    const isNothingSelected = Object.values(selectedItems).every(
      value => !value,
    );
    const isSomeSelected = !isEverythingSelected && !isNothingSelected;
    const handleAllOrNothingChange = () => {
      setSelectedItems(prev =>
        Object.keys(prev).reduce(
          (acc, key) => ({ ...acc, [key]: !isEverythingSelected }),
          {},
        ),
      );
    };
    const handleRegularChange = e => {
      setSelectedItems({
        ...selectedItems,
        [e.target.name]: e.target.checked,
      });
    };
    return (
      <Fieldset label="Jeg vil gjerne reise med">
        <Checkbox
          name="all"
          checked={isSomeSelected ? 'indeterminate' : isEverythingSelected}
          onChange={handleAllOrNothingChange}
        >
          Alt
        </Checkbox>
        {Object.entries(selectedItems).map(([name, checked]) => (
          <Checkbox
            key={name}
            checked={checked}
            name={name}
            onChange={handleRegularChange}
          >
            {name}
          </Checkbox>
        ))}
      </Fieldset>
    );
  }

Normal, disabled og readOnly
<Fieldset label="Hvilke type checkbox skal du velge?">
  <Checkbox>Normal</Checkbox>
  <Checkbox checked disabled>disabled</Checkbox>
  <Checkbox checked readOnly>readOnly</Checkbox>
</Fieldset>