Toggle
Toggle component allows users to switch between two states.
Examples
Default
Basic toggle switch. Click to toggle between on and off states. Use value or defaultValue to control the toggle state.
1import { Toggle } from '@devup-ui/components'
2
3export default function Default() {
4 return <Toggle />
5}
61import { Toggle } from '@devup-ui/components'
2
3export default function Default() {
4 return <Toggle />
5}
6Variant
Use variant="switch" for an alternative visual style with a smaller track and a floating knob with hover outline effect.
1import { Toggle } from '@devup-ui/components'
2
3export default function Switch() {
4 return <Toggle variant="switch" />
5}
61import { Toggle } from '@devup-ui/components'
2
3export default function Switch() {
4 return <Toggle variant="switch" />
5}
6Disabled
Use disabled prop to prevent user interaction. The toggle will have a muted appearance and cannot be toggled.
1import { Toggle } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Disabled() {
5 return (
6 <Flex gap="16px">
7 <Toggle disabled />
8 <Toggle defaultValue disabled />
9 </Flex>
10 )
11}
121import { Toggle } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Disabled() {
5 return (
6 <Flex gap="16px">
7 <Toggle disabled />
8 <Toggle defaultValue disabled />
9 </Flex>
10 )
11}
12Colors
Pass in an object containing color tokens into colors prop. Customize the toggle appearance using primary, bg, hoverBg, primaryHoverBg, disabledBg, and more.
1import { Toggle } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Colors() {
5 return (
6 <Flex gap="16px">
7 <Toggle colors={{ primary: '#10B981' }} defaultValue />
8 <Toggle colors={{ primary: 'orange' }} defaultValue />
9 <Toggle colors={{ primary: 'steelblue' }} defaultValue />
10 </Flex>
11 )
12}
131import { Toggle } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Colors() {
5 return (
6 <Flex gap="16px">
7 <Toggle colors={{ primary: '#10B981' }} defaultValue />
8 <Toggle colors={{ primary: 'orange' }} defaultValue />
9 <Toggle colors={{ primary: 'steelblue' }} defaultValue />
10 </Flex>
11 )
12}
13API
Toggle component props.
| Prop | description | Type | Default |
|---|---|---|---|
| value | The controlled value of the toggle |
|
|
| defaultValue | The default value of the toggle (uncontrolled) |
|
|
| onChange | Callback when the toggle value changes |
|
|
| disabled | Whether the toggle is disabled |
|
|
| variant | The visual variant of the toggle |
|
|
| className | Additional class name for the toggle container |
|
|
| style | Inline styles for the toggle container |
|
|
| classNames | Custom class names for inner elements |
|
|
| styles | Custom inline styles for inner elements |
|
|
| colors | Custom color variables for the toggle |
|
|