Switch

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

render(<Preview />)

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 />)

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 />)

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 />)