Norsk Tipping Design System

Switch

Install

yarn add @ntds/switch

Import

import { Switch } from '@ntds/switch';

Props

PropTypeDefaultDescription
setValue?(value: boolean) => voidPass your setter from useState() directly here. (An alternative to pass onChange handler)
passive?booleanThis prop is used to remove focus ring and hover effect when component is used as a subcomponent outside a list
twBackgroundColorOn?stringbg-haiti-700 dark:bg-blue-400Optional background color property, to override background color for 'On' state.
twBackgroundColorOff?stringbg-haiti-300 dark:bg-gray-600 dark:text-whiteOptional background color property, to override background color for 'Off' state.
twBallColor?stringbg-whiteOptional color property, to override 'ball' color (the circle).

On this page