@sikt/sds-toggle

Consume

npm i -s @sikt/sds-{form,icons,toggle}

React

Toggle Switch

import { ToggleSwitch } from "@sikt/sds-toggle";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-icons/dist/index.css";
import "@sikt/sds-toggle/dist/index.css";

<ToggleSwitch label="Label" />;

Toggle Segment

import { ToggleSegment } from "@sikt/sds-toggle";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-icons/dist/index.css";
import "@sikt/sds-toggle/dist/index.css";

<ToggleSegment legend="Legend">
  <ToggleSegmentOption label="Label 1" value="1" checked onChange={() => {}} />
  <ToggleSegmentOption label="Label 2" value="2" checked onChange={() => {}} />
</ToggleSegment>;

Stylesheets & custom markup

Import stylesheet:

@import url("@sikt/sds-form");
@import url("@sikt/sds-toggle");

Create custom markup:

Toggle Switch

<!-- see html example in Storybook -->