Checkbox
Used in forms when a user needs to select multiple values from several options
'use client'
import { Checkbox } from '@saas-ui/react'
export const CheckboxBasic = () => {
return <Checkbox>Accept terms and conditions</Checkbox>
}
Anatomy
import { Checkbox } from '@saas-ui/react/checkbox'<Checkbox>Click me</Checkbox>Examples
Variants
Use the variant prop to change the visual style of the checkbox.
outline
subtle
solid
'use client'
import { For, HStack, Stack, Text } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithVariants = () => {
return (
<HStack align="flex-start">
<For each={['outline', 'subtle', 'solid']}>
{(variant) => (
<Stack align="flex-start" flex="1" key={variant}>
<Text>{variant}</Text>
<Checkbox defaultChecked variant={variant}>
Checkbox
</Checkbox>
</Stack>
)}
</For>
</HStack>
)
}
Controlled
Use the checked and onCheckedChange props to control the state of the
checkbox.
'use client'
import { useState } from 'react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxControlled = () => {
const [checked, setChecked] = useState(false)
return (
<Checkbox
checked={checked}
onCheckedChange={(e) => setChecked(!!e.checked)}
>
Accept terms and conditions
</Checkbox>
)
}
Colors
Use the colorPalette prop to change the color of the checkbox.
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
'use client'
import { For, Stack, Text } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const CheckboxWithColors = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
width="full"
>
<Text minW="8ch">{colorPalette}</Text>
<For each={['outline', 'subtle', 'solid']}>
{(variant) => (
<Stack key={variant} mb="4">
<Checkbox variant={variant} colorPalette={colorPalette}>
Checkbox
</Checkbox>
<Checkbox
defaultChecked
variant={variant}
colorPalette={colorPalette}
>
Checkbox
</Checkbox>
</Stack>
)}
</For>
</Stack>
))}
</Stack>
)
}
Sizes
Use the size prop to change the size of the checkbox.
'use client'
import { For, Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithSizes = () => {
return (
<Stack align="flex-start" flex="1" gap="4">
<For each={['sm', 'md', 'lg']}>
{(size) => (
<Checkbox defaultChecked size={size} key={size}>
Checkbox
</Checkbox>
)}
</For>
</Stack>
)
}
States
Use the disabled or invalid prop to change the visual state of the checkbox.
'use client'
import { Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithStates = () => {
return (
<Stack>
<Checkbox disabled>Disabled</Checkbox>
<Checkbox defaultChecked disabled>
Disabled
</Checkbox>
<Checkbox readOnly>Readonly</Checkbox>
<Checkbox invalid>Invalid</Checkbox>
</Stack>
)
}
Group
Use the CheckboxGroup component to group multiple checkboxes together.
'use client'
import { CheckboxGroup, Fieldset } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithGroup = () => {
return (
<Fieldset.Root>
<CheckboxGroup defaultValue={['react']} name="framework">
<Fieldset.Legend fontSize="sm" mb="2">
Select framework
</Fieldset.Legend>
<Fieldset.Content>
<Checkbox value="react">React</Checkbox>
<Checkbox value="svelte">Svelte</Checkbox>
<Checkbox value="vue">Vue</Checkbox>
<Checkbox value="angular">Angular</Checkbox>
</Fieldset.Content>
</CheckboxGroup>
</Fieldset.Root>
)
}
Custom Icon
Use the icon prop to change the icon of the checkbox.
'use client'
import { Checkbox } from '@saas-ui/react'
import { HiOutlinePlus } from 'react-icons/hi'
export const CheckboxWithCustomIcon = () => {
return (
<Checkbox defaultChecked icon={<HiOutlinePlus />}>
With Custom Icon
</Checkbox>
)
}
Indeterminate
Set the checked prop to indeterminate to show the checkbox in an
indeterminate state.
'use client'
import { useState } from 'react'
import { Stack } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
const initialValues = [
{ label: 'Monday', checked: false, value: 'monday' },
{ label: 'Tuesday', checked: false, value: 'tuesday' },
{ label: 'Wednesday', checked: false, value: 'wednesday' },
{ label: 'Thursday', checked: false, value: 'thursday' },
]
export const CheckboxIndeterminate = () => {
const [values, setValues] = useState(initialValues)
const allChecked = values.every((value) => value.checked)
const indeterminate = values.some((value) => value.checked) && !allChecked
const items = values.map((item, index) => (
<Checkbox
ms="6"
key={item.value}
checked={item.checked}
onCheckedChange={(e) => {
setValues((current) => {
const newValues = [...current]
newValues[index] = { ...newValues[index], checked: !!e.checked }
return newValues
})
}}
>
{item.label}
</Checkbox>
))
return (
<Stack align="flex-start">
<Checkbox
checked={indeterminate ? 'indeterminate' : allChecked}
onCheckedChange={(e) => {
setValues((current) =>
current.map((value) => ({ ...value, checked: !!e.checked })),
)
}}
>
Weekdays
</Checkbox>
{items}
</Stack>
)
}
Description
Add content to the children of the Checkbox component to add a description.
'use client'
import { Box } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithDescription = () => {
return (
<Checkbox gap="4" alignItems="flex-start">
<Box lineHeight="1">I agree to the terms and conditions</Box>
<Box fontWeight="normal" color="fg.muted" mt="1">
By clicking this, you agree to our Terms and Privacy Policy.
</Box>
</Checkbox>
)
}
Link
Render an anchor tag as the checkbox label.
'use client'
import { Link } from '@chakra-ui/react'
import { Checkbox } from '@saas-ui/react'
export const CheckboxWithLink = () => {
return (
<Checkbox>
I agree to the{' '}
<Link colorPalette="teal" href="https://google.com">
terms and conditions
</Link>
</Checkbox>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
value | '\'on\'' | stringThe value of checkbox input. Useful for form submission. |
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
variant | 'solid' | 'outline' | 'solid' | 'subtle'The variant of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
checked | CheckedStateThe controlled checked state of the checkbox | |
defaultChecked | CheckedStateThe initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. | |
disabled | booleanWhether the checkbox is disabled | |
form | stringThe id of the form that the checkbox belongs to. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; hiddenInput: string; control: string; label: string }>The ids of the elements in the checkbox. Useful for composition. | |
invalid | booleanWhether the checkbox is invalid | |
name | stringThe name of the input field in a checkbox. Useful for form submission. | |
onCheckedChange | (details: CheckedChangeDetails) => voidThe callback invoked when the checked state changes. | |
readOnly | booleanWhether the checkbox is read-only | |
required | booleanWhether the checkbox is required | |
as | React.ElementTypeThe underlying element to render. | |
unstyled | booleanWhether to remove the component's style. |