Switch

Unable to parse html

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

render(<Preview />)

Bruk

Bruk klassenavnet ds-input på <input> sammen med type="checkbox" og role="switch".

For et gyldig skjemaelement anbefaler vi å bruke <ds-field> sammen med en <label>.

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

Switch er ds-input med type="checkbox" så variabler og data-attributter som gjelder for input gjelder også for switch.

Høyrejustert

Ønsker du å høyrejustere switch legger du data-position="end" på <ds-field>.

Unable to parse html

const RightAligned = () => {
  return <Switch label='Flymodus' position='end' defaultChecked />;
};

render(<RightAligned />)

Outline

data-variant="outline" legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.

Unable to parse html

const Outline = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Aktiver varslinger</Fieldset.Legend>
      <Switch variant='outline' label='Driftsmeldinger' checked />
      <Switch variant='outline' label='Påminnelser' />
      <Switch variant='outline' label='Nyhetsoppdateringer' />
      <Switch
        label='SMS-varsler'
        description='Mangler gyldig telefonnummer i profilen'
        variant='outline'
        readOnly
      />
    </Fieldset>
  );
};

render(<Outline />)

Readonly

type="checkbox" er alltid :read-only, og har ikke støtte for dette på samme måte som input-typer du kan skrive i.

Dersom du setter readonly på switch sørger vi for at den oppfører seg som om den kun har lesetilgang, ved å stoppe onClick og onChange.

Brukeren vil fortsatt kunne fokusere på elementet.

Unable to parse html

const ReadOnly = () => (
  <Switch
    label='Flymodus'
    description='Får ikke kontakt med flymodusenheten'
    readOnly
    defaultChecked
  />
);

render(<ReadOnly />)

React

I React er det enklere å bygge en switch, fordi vi har en ferdiglaget komponent som håndterer det meste av logikken og tilstandshåndteringen for oss.

Switch er en sammensatt komponent som bruker field, label, og input for å lage en switch.