Switch

Used to capture a binary state.

Activate Hygge

<Switch label="Activate Hygge" />

Examples

Sizes

Pass the size prop to the Switch component to change the size of the switch.

Switch smSwitch mdSwitch lg

<div className="flex flex-col gap-2">
  <Switch size="sm" label="Switch sm" />
  <Switch size="md" label="Switch md" />
  <Switch size="lg" label="Switch lg" />
</div>

States

Pass the disabled or invalid prop to the Switch component to change the visual state of the switch.

DisabledDisabledReadonlyInvalid

<div className="flex flex-col gap-2">
  <Switch label="Disabled" disabled />
  <Switch label="Disabled" defaultChecked disabled />
  <Switch label="Readonly" readOnly />
  <Switch label="Invalid" invalid />
</div>

Label Position

Here's an example of how to change the label position to the left.

Accept terms and conditions

<Switch label="Accept terms and conditions" labelPlacement="start" />

Color

Use the colorPalette prop to change the color of the rating.

<div className="grid grid-cols-[8ch_1fr] items-center gap-y-2">
  <Text>gray</Text>
  <Switch colorPalette="gray" defaultChecked/>
  <Text>orange</Text>
  <Switch colorPalette="orange" defaultChecked/>
  <Text>teal</Text>
  <Switch colorPalette="teal" defaultChecked/>
  <Text>green</Text>
  <Switch colorPalette="green" defaultChecked/>
  <Text>red</Text>
  <Switch colorPalette="red" defaultChecked/>
</div>