Switch

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

render(<Preview />)

Bruk

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

Bruk position="end" til å plassere Switch på høyre side av ledeteksten hvis du trenger det.

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

render(<RightAligned />)

HTML

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

For å speile det som den samensatte komponenten i React gjør, må du bruke ds-field sammen med en <label>.

Skal du høyrejustere <input> legger du data-position="end" på ds-field.

CSS variabler og data-attributter

Switch er en sammensatt komponent, og derfor viser vi variabler og data-attributter fra ds-input her.