Switch

A control element that allows for a binary selection.

Fidely UI Switch

import { Switch } from '@fidely-ui/react/switch'

export const SwitchBasics = () => {
  return (
    <Switch.Root>
      <Switch.HiddenInput />
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Fidely UI Switch</Switch.Label>
    </Switch.Root>
  )
}

Usage

import { Switch } from '@fidely-ui/react'

<Switch.Root>
  <Switch.HiddenInput />
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
</Switch.Root>

Examples

Sizes

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

import { HStack, Switch } from '@fidely-ui/react'

export const SwitchSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg'] as const

  return (
    <HStack gap={3}>
      {sizes.map((size) => (
        <Switch.Root key={size} size={size}>
          <Switch.HiddenInput />
          <Switch.Control>
            <Switch.Thumb />
          </Switch.Control>
        </Switch.Root>
      ))}
    </HStack>
  )
}

Colors

Pass the colorPalette prop to the Switch.Root component to change the color of the component.

green

orange

import { HStack, Stack, Switch, Text } from '@fidely-ui/react'

export const SwitchWithColors = () => {
  return (
    <Stack gap={5}>
      <HStack gap={6} alignItems="center">
        <Text fontWeight="medium" textTransform="capitalize">
          green
        </Text>

        <Switch.Root colorPalette={'green'} defaultChecked>
          <Switch.HiddenInput />
          <Switch.Control>
            <Switch.Thumb />
          </Switch.Control>
        </Switch.Root>

        <Text fontWeight="medium" textTransform="capitalize">
          orange
        </Text>

        <Switch.Root colorPalette={'orange'} defaultChecked>
          <Switch.HiddenInput />
          <Switch.Control>
            <Switch.Thumb />
          </Switch.Control>
          <Switch.Label></Switch.Label>
        </Switch.Root>
      </HStack>
    </Stack>
  )
}

Controlled

Use the checked and onCheckedChange props to control the state of the switch.

Fidely UI Switch

'use client'

import { useState } from 'react'
import { Switch } from '@fidely-ui/react/switch'

export const SwitchWithControl = () => {
  const [checked, setChecked] = useState(false)

  return (
    <Switch.Root
      checked={checked}
      onCheckedChange={(e) => setChecked(e.checked)}
    >
      <Switch.HiddenInput />
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Fidely UI Switch</Switch.Label>
    </Switch.Root>
  )
}

Props

Root

Prop	Type	Default	Description
`checked`	`boolean`	—	Controls the checked state of the switch (for controlled usage).
`defaultChecked`	`boolean`	`false`	Sets the initial checked state (for uncontrolled usage).
`onCheckedChange`	`(checked: boolean) => void`	—	Callback fired when the switch state changes.
`required`	`boolean`	`false`	Marks the switch as required in a form.
`disabled`	`boolean`	`false`	Disables interaction with the switch.
`name`	`string`	—	The name of the switch input for form submission.
`value`	`string`	`"on"`	The value of the switch input when checked.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the size of the switch.
`colorPalette`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	`"blue"`	Sets the color palette of the switch.
`children`	`ReactNode`	—	The content of the switch, typically including control, thumb, and label.
`as`	`React.ElementType`	—	The content of the switch, typically including control, thumb, and label.

Control

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contains the visual parts of the switch (usually the `Thumb`).

Thumb

Prop	Type	Default	Description
`children`	`ReactNode`	—	Optional custom thumb content.

Label

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label text displayed beside the switch.

HiddenInput

Prop	Type	Default	Description
`name`	`string`	—	The name of the hidden input field.
`value`	`string`	`"on"`	The value of the hidden input when the switch is checked.