Devup UI - Toggle

Toggle

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.

Show Code

1import { Toggle } from '@devup-ui/components'
2
3export default function Default() {
4    return <Toggle />
5}
6

1import { Toggle } from '@devup-ui/components'
2
3export default function Default() {
4    return <Toggle />
5}
6

Variant Use variant="switch" for an alternative visual style with a smaller track and a floating knob with hover outline effect.

Show Code

1import { Toggle } from '@devup-ui/components'
2
3export default function Switch() {
4    return <Toggle variant="switch" />
5}
6

1import { Toggle } from '@devup-ui/components'
2
3export default function Switch() {
4    return <Toggle variant="switch" />
5}
6

Disabled Use disabled prop to prevent user interaction. The toggle will have a muted appearance and cannot be toggled.

Show Code

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}
12

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}
12

Colors Pass in an object containing color tokens into colors prop. Customize the toggle appearance using primary, bg, hoverBg, primaryHoverBg, disabledBg, and more.

Show Code

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}
13

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}
13

API

Toggle component props.

Prop	description	Type	Default
value	The controlled value of the toggle	`boolean \| null`	`null`
defaultValue	The default value of the toggle (uncontrolled)	`boolean \| null`	`null`
onChange	Callback when the toggle value changes	`(value: boolean) => void`	`undefined`
disabled	Whether the toggle is disabled	`boolean`	`false`
variant	The visual variant of the toggle	`'default' \| 'switch'`	`'default'`
className	Additional class name for the toggle container	`string`	`undefined`
style	Inline styles for the toggle container	`React.CSSProperties`	`undefined`
classNames	Custom class names for inner elements	`{ toggle?: string }`	`undefined`
styles	Custom inline styles for inner elements	`{ toggle?: React.CSSProperties }`	`undefined`
colors	Custom color variables for the toggle	`{ primary?: string bg?: string hoverBg?: string primaryHoverBg?: string disabledBg?: string switchHoverOutline?: string switchShadow?: string }`	`undefined`