Devup UI - Checkbox

Checkbox

Checkbox

Checkbox component allows users to select multiple options.

Examples

Agree to terms and conditions

Default Basic checkbox with a label. Users can click to toggle the checked state.

Show Code

1import { Checkbox } from '@devup-ui/components'
2
3export default function Default() {
4    return <Checkbox>Agree to terms and conditions</Checkbox>
5}
6

1import { Checkbox } from '@devup-ui/components'
2
3export default function Default() {
4    return <Checkbox>Agree to terms and conditions</Checkbox>
5}
6

Checked by default

Checked Use defaultChecked prop to set the initial checked state for uncontrolled usage, or use checked prop for controlled state management.

Show Code

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

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

Disabled unchecked

Disabled checked

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

Show Code

1import { Checkbox } from '@devup-ui/components'
2import { VStack } from '@devup-ui/react'
3
4export default function Disabled() {
5    return (
6        <VStack gap="8px">
7            <Checkbox disabled>Disabled unchecked</Checkbox>
8            <Checkbox defaultChecked disabled>
9                Disabled checked
10            </Checkbox>
11        </VStack>
12    )
13}
14

1import { Checkbox } from '@devup-ui/components'
2import { VStack } from '@devup-ui/react'
3
4export default function Disabled() {
5    return (
6        <VStack gap="8px">
7            <Checkbox disabled>Disabled unchecked</Checkbox>
8            <Checkbox defaultChecked disabled>
9                Disabled checked
10            </Checkbox>
11        </VStack>
12    )
13}
14

Green

Orange

Steel Blue

Colors Pass in an object containing color tokens into colors prop. You can customize the checkbox appearance using primary, border, text, inputBg, and checkIcon color values.

Show Code

1import { Checkbox } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Colors() {
5    return (
6        <Flex flexWrap="wrap" gap="16px">
7            <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
8                Green
9            </Checkbox>
10            <Checkbox colors={{ primary: 'orange' }} defaultChecked>
11                Orange
12            </Checkbox>
13            <Checkbox colors={{ primary: 'steelblue' }} defaultChecked>
14                Steel Blue
15            </Checkbox>
16        </Flex>
17    )
18}
19

1import { Checkbox } from '@devup-ui/components'
2import { Flex } from '@devup-ui/react'
3
4export default function Colors() {
5    return (
6        <Flex flexWrap="wrap" gap="16px">
7            <Checkbox colors={{ primary: '#10B981' }} defaultChecked>
8                Green
9            </Checkbox>
10            <Checkbox colors={{ primary: 'orange' }} defaultChecked>
11                Orange
12            </Checkbox>
13            <Checkbox colors={{ primary: 'steelblue' }} defaultChecked>
14                Steel Blue
15            </Checkbox>
16        </Flex>
17    )
18}
19

API

Checkbox props extends the input HTML attributes (except type and onChange).

Prop	description	Type	Default
children	The label content of the checkbox	`React.ReactNode`
checked	Whether the checkbox is checked (controlled)	`boolean`	`undefined`
defaultChecked	Whether the checkbox is checked by default (uncontrolled)	`boolean`	`false`
disabled	Whether the checkbox is disabled	`boolean`	`false`
onChange	Callback when the checked state changes	`(checked: boolean) => void`	`undefined`
colors	Custom color variables for the checkbox	`{ primary?: string border?: string text?: string inputBg?: string checkIcon?: string }`	`undefined`