Switch

const Preview = () => {
  return <Switch label='Switch' />;
};

render(<Preview />)

Bruk Switch når

• valget styrer en funksjon eller innstilling som kan være av eller på
• endringen trer i kraft umiddelbart når brukeren slår bryteren av eller på

Unngå Switch når

• brukerne skal svare på spørsmål i skjemaer, bruk heller Radio eller Checkbox
• innhold skal endre visning mellom to kategorier, bruk heller ToggleGroup
• innhold skal filtreres, bruk heller Chip

Eksempel

Gruppering

Bruk Fieldset for å gruppere flere Switch-komponenter sammen.

const Group = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Skru av/på lys</Fieldset.Legend>
      <Switch label='Stue' checked />
      <Switch label='Kjøkken' />
      <Switch label='Bad' />
      <Switch
        label='Soverom'
        description='Får ikke kontakt med lyspærene'
        readOnly
      />
    </Fieldset>
  );
};

render(<Group />)

Høyrejustert

Noen ganger kan det være nyttig å høyrejustere Switch, for eksempel når den er plassert i en tabell eller et fast oppsett.

const RightAligned2 = () => (
  <div
    style={{
      flexDirection: 'column',
      width: '100%',
      maxWidth: '380px',
    }}
  >
    <Divider />

    <Field
      position='end'
      style={{
        alignItems: 'center',
        padding: 'var(--ds-size-2) 0',
      }}
    >
      <Label>Flymodus</Label>
      <Input type='checkbox' role='switch' />
    </Field>

    <Divider />

    <Field
      position='end'
      style={{
        alignItems: 'center',
        padding: 'var(--ds-size-2) 0',
      }}
    >
      <Label>Lydløs</Label>
      <Input type='checkbox' role='switch' />
    </Field>

    <Divider />
  </div>
);

render(<RightAligned2 />)

Retningslinjer

Switch skal brukes til å slå av eller på innstillinger, funksjoner eller varsler. Den gir brukeren en visuell bekreftelse på en tilstand.

Tekst

Teksten til en Switch må være kort og presis, ofte betyr det bare ett eller to ord. Det skal gi mening når du sier ledeteksten høyt og legger til av/på etterpå.

Hvis du har flere Switch i en gruppe, må du passe på at du er konsekvent med hvordan du formulerer tekstene til hver av dem, ikke formulerer dem forskjellig.

Teksten skal beskrive hva funksjonen gjelder, ikke om den er på eller av. Hvis statusen skrives inn i labelen, kan det bli forvirrende og vanskelig å vite hvilken tilstand switchen faktisk er i.