Switch

Props

The Switch component accepts the following props:

Label

The label prop sets the label for the switch.

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop sets the size of the switch. You can choose from a range of sizes including 3xs, 2xs, xs, sm, md, lg, xl, 2xl and 3xl.

import { Flex, Switch } from '@pillar-ui/core'

export function SwitchSizes() {
  return (
    <Flex gap="sm" items="center">
      <Switch label="Hello" size="3xs" />
      <Switch label="Hello" size="2xs" />
      <Switch label="Hello" size="xs" />
      <Switch label="Hello" size="sm" />
      <Switch label="Hello" size="md" />
      <Switch label="Hello" size="lg" />
      <Switch label="Hello" size="xl" />
      <Switch label="Hello" size="2xl" />
      <Switch label="Hello" size="3xl" />
    </Flex>
  )
}

Color

Type: string
Default: primary
Options: danger | warning | success | primary | secondary | bg

The color prop sets the color of the switch. You can choose from a range of colors including red, orange, green, primary, purple, secondary, bg and brown.

import { Flex, Switch } from '@pillar-ui/core'

export function SwitchSizes() {
  return (
    <Flex gap="sm" items="center">
      <Switch label="Hello" color="dan" />
      <Switch label="Hello" color="war" />
      <Switch label="Hello" color="suc" />
      <Switch label="Hello" color="pri" />
      <Switch label="Hello" color="sec" />
      <Switch label="Hello" color="bg" />
    </Flex>
  )
}

DefaultPressed

The defaultPressed prop sets the default state of the switch. If set to true, the switch will be in the pressed state by default.

import { Flex, Switch } from '@pillar-ui/core'

export function SwitchDefault() {
  return (
    <Flex gap="sm" items="center">
      <Switch label="Hello" defaultPressed color="dan" />
      <Switch label="Hello" defaultPressed color="war" />
      <Switch label="Hello" defaultPressed color="suc" />
      <Switch label="Hello" defaultPressed color="pri" />
      <Switch label="Hello" defaultPressed color="sec" />
      <Switch label="Hello" defaultPressed color="bg" />
    </Flex>
  )
}

Corner

The corner prop sets the corner style of the switch. You can choose from a range of corner styles including sharp, xs, sm, md, lg, xl and full.

import { Flex, Switch } from '@pillar-ui/core'

export function SwitchDefault() {
  return (
    <Flex gap="sm" items="center">
      <Switch label="Hello" corner="sharp" />
      <Switch label="Hello" corner="xs" />
      <Switch label="Hello" corner="sm" />
      <Switch label="Hello" corner="md" />
      <Switch label="Hello" corner="lg" />
      <Switch label="Hello" corner="xl" />
      <Switch label="Hello" corner="full" />
    </Flex>
  )
}

Disabled

The disabled prop disables the switch.

import { Flex, Switch } from '@pillar-ui/core'

export function SwitchDefault() {
  return (
    <Flex gap="sm" items="center">
      <Switch label="Hello" disabled />
      <Switch label="Hello" disabled defaultPressed />
    </Flex>
  )
}

Use Case

The Switch component is used to toggle between two states. It can be used in various scenarios such as when you need to enable or disable a feature or when you need to switch between two modes.

Troubleshooting

If you encounter any issues while using the Switch component, please check if you have imported it correctly and if you are passing valid props.

Conclusion

The Switch component is a versatile and easy-to-use component that can be used to toggle between two states. It comes with a range of customization options and follows accessibility best practices.

Pillar UI React Switch Component documentation