Switch

Unable to parse html

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

render(<Preview />)

Usage

Use the classname ds-input on <input> along with type="checkbox" and role="switch".

For a valid form element, we recommend using <ds-field> together with a <label>.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

Switch is ds-input with type="checkbox", so variables and data attributes that apply to input also apply to switch.

Right-aligned

To right-align the switch, add data-position="end" to <ds-field>.

Unable to parse html

const RightAlignedEn = () => {
  return <Switch label='Flight mode' position='end' defaultChecked />;
};

render(<RightAlignedEn />)

Outline

data-variant="outline" adds extra padding and a border around the selection to create a larger clickable area.

Unable to parse html

const OutlineEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Enable notifications</Fieldset.Legend>
      <Switch variant='outline' label='Service messages' checked />
      <Switch variant='outline' label='Reminders' />
      <Switch variant='outline' label='News updates' />
      <Switch
        label='SMS alerts'
        description='Missing a valid phone number in your profile'
        variant='outline'
        readOnly
      />
    </Fieldset>
  );
};

render(<OutlineEn />)

ReadOnly

type="checkbox" is always :read-only and does not support this in the same way as input types you can type into.

If you set readonly on a switch, we ensure that it behaves as if it has read-only access by stopping onClick and onChange.

The user will still be able to focus on the element.

Unable to parse html

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

render(<ReadOnly />)

React

In React, building a switch is easier because we have a ready-made component that handles most of the logic and state management for us.

Switch is a composite component that uses field, label, and input to create a switch.