Pillar UI React Switch Component documentation
Toggle Switch React Component: Create intuitive binary choices with this versatile and customizable component.
Components:
Type
import
import { Pillar UI React Switch Component } from '@pillar-ui/core'
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.