Checkbox
Build interactive forms with a customizable Checkbox component for React. Seamlessly integrate checkboxes into your applications, providing users with clear and intuitive options.
Components:
Checkbox
Type
Components
import
import { Checkbox } from '@pillar-ui/core'
Usage
import { Checkbox } from '@pillar-ui/core'
<Checkbox />
Examples
Content
import { Checkbox, Link, Text } from '@pillar-ui/core'
export const CheckboxContent = () => {
return (
<>
<Checkbox name="nice">Hello world</Checkbox>
<Checkbox name="to">
<Text weight="5">Hello world</Text>
<Text color="b" low size="3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nobis molestias molestiae repellendus
ipsum qui ad voluptas vel eligendi perspiciatis id in hic iure quis aperiam fugit, asperiores earum nesciunt.
</Text>
</Checkbox>
<Checkbox name="meet">
<Text weight="5">Hello world</Text>
<Text color="b" low size="3" width="60c">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nobis molestias molestiae repellendus
ipsum qui ad voluptas vel eligendi perspiciatis id in hic iure quis aperiam fugit, asperiores earum nesciunt.
</Text>
</Checkbox>
<Checkbox name="you">
<Text color="b" low as="span">
I agree to the
</Text>
<Link
color="b"
low
rel="noreferrer"
href="https://pillar-ui.com/docs/components/checkbox#content"
target="_blank"
>
terms of service
</Link>
</Checkbox>
</>
)
}
Size
Default
4
Type
'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Checkbox } from '@pillar-ui/core'
export const CheckboxSize = () => {
return (
<>
<Checkbox size="1">Hello world</Checkbox>
<Checkbox size="2">Hello world</Checkbox>
<Checkbox size="3">Hello world</Checkbox>
<Checkbox size="4">Hello world</Checkbox>
<Checkbox size="5">Hello world</Checkbox>
<Checkbox size="6">Hello world</Checkbox>
<Checkbox size="7">Hello world</Checkbox>
<Checkbox size="8">Hello world</Checkbox>
<Checkbox size="9">Hello world</Checkbox>
</>
)
}
Color
Default
p
Type
'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
import { Checkbox } from '@pillar-ui/core'
export const CheckboxColor = () => {
return (
<>
<Checkbox name="hello">Hello world</Checkbox>
<Checkbox name="hello" color="d">
Hello world
</Checkbox>
<Checkbox name="hello" color="su">
Hello world
</Checkbox>
<Checkbox name="hello" color="w">
Hello world
</Checkbox>
<Checkbox name="hello" color="p">
Hello world
</Checkbox>
<Checkbox name="hello" color="se">
Hello world
</Checkbox>
<Checkbox name="hello" color="b">
Hello world
</Checkbox>
<Checkbox name="hello" color="i">
Hello world
</Checkbox>
</>
)
}
Variant
Default
solid
Type
'solid' | 'soft' | 'mixed' | 'outline'
import { Checkbox, Flex } from '@pillar-ui/core'
export const CheckboxVariant = () => {
return (
<div className="Sf-4">
<Flex gap="4">
<Checkbox name="hello" defaultChecked variant="solid">
Hello world
</Checkbox>
<Checkbox name="hello" defaultChecked variant="soft">
Hello world
</Checkbox>
<Checkbox name="hello" defaultChecked variant="mixed">
Hello world
</Checkbox>
<Checkbox name="hello" defaultChecked variant="outline">
Hello world
</Checkbox>
</Flex>
<Flex gap="4">
<Checkbox name="hello" isIndeterminate variant="solid">
Hello world
</Checkbox>
<Checkbox name="hello" isIndeterminate variant="soft">
Hello world
</Checkbox>
<Checkbox name="hello" isIndeterminate variant="mixed">
Hello world
</Checkbox>
<Checkbox name="hello" isIndeterminate variant="outline">
Hello world
</Checkbox>
</Flex>
</div>
)
}
Disabled
import { Checkbox, Flex } from '@pillar-ui/core'
export const CheckboxDisabled = () => {
return (
<>
<Flex gap="4" items="center">
<Checkbox disabled name="hello" color="d">
Hello world
</Checkbox>
<Checkbox disabled name="hello" color="su">
Hello world
</Checkbox>
<Checkbox disabled name="hello" color="w">
Hello world
</Checkbox>
<Checkbox disabled name="hello" color="p">
Hello world
</Checkbox>
<Checkbox disabled name="hello" color="se">
Hello world
</Checkbox>
<Checkbox disabled name="hello" color="b">
Hello world
</Checkbox>
</Flex>
<Flex gap="4" items="center">
<Checkbox disabled defaultChecked name="hello" color="d">
Hello world
</Checkbox>
<Checkbox disabled defaultChecked name="hello" color="su">
Hello world
</Checkbox>
<Checkbox disabled defaultChecked name="hello" color="w">
Hello world
</Checkbox>
<Checkbox disabled defaultChecked name="hello" color="p">
Hello world
</Checkbox>
<Checkbox disabled defaultChecked name="hello" color="se">
Hello world
</Checkbox>
<Checkbox disabled defaultChecked name="hello" color="b">
Hello world
</Checkbox>
</Flex>
</>
)
}
DefaultChecked
Default
false
Type
boolean
import { Checkbox } from '@pillar-ui/core'
export const CheckboxDefaultChecked = () => {
return (
<>
<Checkbox defaultChecked name="hello" color="d">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="su">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="w">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="p">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="se">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="b">
Hello world
</Checkbox>
<Checkbox defaultChecked name="hello" color="i">
Hello world
</Checkbox>
</>
)
}
Status
import { Checkbox } from '@pillar-ui/core'
export const CheckboxStatus = () => {
return (
<>
<Checkbox name="hello">Hello world</Checkbox>
<Checkbox name="hello" checked>
Hello world
</Checkbox>
<Checkbox name="hello" isIndeterminate>
Hello world
</Checkbox>
<Checkbox name="hello" isIndeterminate checked>
Hello world
</Checkbox>
</>
)
}
isIndeterminate
Default
false
Type
boolean
'use client'
import { Checkbox } from '@pillar-ui/core'
import { useCheckboxGroup } from '@pillar-ui/hooks'
import { Children, cloneElement } from 'react'
const ParentCheckbox = ({ children }: any) => {
const child = Array.from({ length: Children.count(children) }, () => false)
const { checkedItems, isAllChecked, isIndeterminate, handleToggleAll, handleToggleItem } = useCheckboxGroup(child)
return (
<>
<Checkbox checked={isAllChecked} isIndeterminate={isIndeterminate} onChange={handleToggleAll}>
Hello world
</Checkbox>
<ul style={{ listStyle: 'none' }} className="Sf-1">
{Children.map(children, (child, index) => (
<li>
{cloneElement(child, {
checked: checkedItems[index],
onChange: () => handleToggleItem(index),
})}
</li>
))}
</ul>
</>
)
}
export const CheckboxIsIndeterminate= ()=> (
<ParentCheckbox>
<Checkbox name="child1">Hello world</Checkbox>
<Checkbox name="child2">Hello world</Checkbox>
<Checkbox name="child3">Hello world</Checkbox>
</ParentCheckbox>
)
CheckboxGroup
CheckboxGroup groups checkbox buttons, ensuring only one can be selected. It shares common properties across all buttons within it, reducing code repetition and simplifying management.
import { Checkbox, CheckboxGroup } from '@pillar-ui/core'
import React from 'react'
export const CheckboxGroupBase = () => {
return (
<CheckboxGroup legend="Choose Colors" variant="outline" name="color" color="se" size="4">
<Checkbox value="red">Red</Checkbox>
<Checkbox value="green">Green</Checkbox>
<Checkbox value="blue">Blue</Checkbox>
<Checkbox value="yellow">Yellow</Checkbox>
<Checkbox value="orange">Orange</Checkbox>
<Checkbox value="purple">Purple</Checkbox>
</CheckboxGroup>
)
}
Checkbox Group Direction
Default
col
Type
'col' | 'row'
import { Flex, Checkbox, CheckboxGroup } from '@pillar-ui/core'
import React from 'react'
export const CheckboxGroupDirection = () => {
return (
<Flex direction="col" gap="4">
<CheckboxGroup legend="Choose Colors" direction="row" variant="outline" name="row.color" color="se" size="4">
<Checkbox value="red">Red</Checkbox>
<Checkbox value="green">Green</Checkbox>
<Checkbox value="blue">Blue</Checkbox>
<Checkbox value="yellow">Yellow</Checkbox>
<Checkbox value="orange">Orange</Checkbox>
<Checkbox value="purple">Purple</Checkbox>
</CheckboxGroup>
<CheckboxGroup legend="Choose Colors" variant="outline" name="col.color" color="i" size="4">
<Checkbox value="red">Red</Checkbox>
<Checkbox value="green">Green</Checkbox>
<Checkbox value="blue">Blue</Checkbox>
<Checkbox value="yellow">Yellow</Checkbox>
<Checkbox value="orange">Orange</Checkbox>
<Checkbox value="purple">Purple</Checkbox>
</CheckboxGroup>
</Flex>
)
}
CustomCheckbox
import { Avatar, Badge, Chips, CustomCheckbox, Flex, CheckboxGroup, Text } from '@pillar-ui/core'
import React from 'react'
interface UserProps {
online?: boolean
name?: string
email?: string
job?: string
}
const User = ({ online = false, name, email, job }: UserProps) => {
return (
<Flex items="center" justify="between" gap="5">
<Flex gap="3">
<Avatar title="John Doe" size="4" />
<div>
<Text size="4" weight="5">
{name}
</Text>
<Text size="3" color="b" low>
{email}
</Text>
</div>
</Flex>
<Flex gap="2" items="center">
<Chips>{online ? 'Online' : 'Offline'}</Chips>
<Chips color="b" variant="soft">
{job}
</Chips>
</Flex>
</Flex>
)
}
export const CustomCheckboxAdvanced = () => {
return (
<CheckboxGroup legend="Choose Your Best option" name="hello" direction="row">
<CustomCheckbox>
<User name="John Doe" email="john@doe.com" job="AI engineer" online />
</CustomCheckbox>
<CustomCheckbox>
<User name="Hamza Miloud" email="hamza@gmail.com" job="Frontend Developer" online={false} />
</CustomCheckbox>
</CheckboxGroup>
)
}
Custom Checkbox Direction
Default
col
Type
'col' | 'row'
import { CustomCheckbox, Flex, Paper, CheckboxGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'
const CheckboxCard = ({ title, price, deliveryTime }: any) => {
return (
<Paper flow="3">
<Paper flow="1">
<Text size="5" weight="5" leading="1">
{title}
</Text>
<Text color="b" low>
{deliveryTime}
</Text>
</Paper>
<Flex gap="1" items="center">
<Dollar width="20" />
<Text weight="6" size="4">
{price}
</Text>
</Flex>
</Paper>
)
}
export const CustomCheckboxDirection = () => {
return (
<>
<CheckboxGroup color="w" legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox>
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
<CheckboxGroup color="se" legend="Delivery Method" direction="col" name="delivery">
<CustomCheckbox>
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
</>
)
}
Custom Checkbox Color
import { CustomCheckbox, Flex, Paper, CheckboxGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'
const CheckboxCard = ({ title, price, deliveryTime }: any) => {
return (
<Paper flow="3">
<Paper flow="1">
<Text size="5" weight="5" leading="1">
{title}
</Text>
<Text color="b" low>
{deliveryTime}
</Text>
</Paper>
<Flex gap="1" items="center">
<Dollar width="20" />
<Text weight="6" size="4">
{price}
</Text>
</Flex>
</Paper>
)
}
export const CustomCheckboxColor = () => {
return (
<Flex direction="col" gap="4">
<CheckboxGroup legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox color="p">
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox color="w">
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox color="d">
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
<CustomCheckbox color="su">
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
<CustomCheckbox color="se">
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
<CustomCheckbox color="i">
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
</Flex>
)
}
Custom Checkbox Variant
Default
solid
Type
'solid' | 'outline' | 'soft' | 'mixed'
import { CustomCheckbox, CheckboxGroup, Text } from '@pillar-ui/core'
import React from 'react'
export const CustomCheckboxVariant = () => {
return (
<CheckboxGroup legend="Choose Your Best option" name="hello" direction="row">
<CustomCheckbox variant="soft">
<Text>Solid</Text>
</CustomCheckbox>
<CustomCheckbox variant="outline">
<Text>Outline</Text>
</CustomCheckbox>
<CustomCheckbox variant="solid">
<Text>Soft</Text>
</CustomCheckbox>
<CustomCheckbox variant="mixed">
<Text>Mixed</Text>
</CustomCheckbox>
</CheckboxGroup>
)
}
indicator
Default
true
Type
boolean
import { CustomCheckbox, Flex, Paper, CheckboxGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'
const CheckboxCard = ({ title, price, deliveryTime }: any) => {
return (
<Paper flow="3">
<Paper flow="1">
<Text size="5" weight="5" leading="1">
{title}
</Text>
<Text color="b" low>
{deliveryTime}
</Text>
</Paper>
<Flex gap="1" items="center">
<Dollar width="20" />
<Text weight="6" size="4">
{price}
</Text>
</Flex>
</Paper>
)
}
export const CustomCheckboxNoIndicator = () => {
return (
<Flex direction="col" gap="4">
<CheckboxGroup indicator={false} legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox>
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox indicator>
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
</Flex>
)
}
reversed
Default
true
Type
boolean
import { CustomCheckbox, Flex, Paper, CheckboxGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'
const CheckboxCard = ({ title, price, deliveryTime }: any) => {
return (
<Paper flow="3">
<Paper flow="1">
<Text size="5" weight="5" leading="1">
{title}
</Text>
<Text color="b" low>
{deliveryTime}
</Text>
</Paper>
<Flex gap="1" items="center">
<Dollar width="20" />
<Text weight="6" size="4">
{price}
</Text>
</Flex>
</Paper>
)
}
export const CustomCheckboxReversed = () => {
return (
<Flex direction="col" gap="4">
<CheckboxGroup legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox defaultChecked reversed color="w">
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox color="w">
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
</CheckboxGroup>
</Flex>
)
}
fluid
Default
true
Type
boolean
import { CustomCheckbox, Flex, Paper, CheckboxGroup, Text } from '@pillar-ui/core'
import { Dollar } from '@pillar-ui/icons'
import React from 'react'
const CheckboxCard = ({ title, price, deliveryTime }: any) => {
return (
<Paper flow="3">
<Paper flow="1">
<Text size="5" weight="5" leading="1">
{title}
</Text>
<Text color="b" low>
{deliveryTime}
</Text>
</Paper>
<Flex gap="1" items="center">
<Dollar width="20" />
<Text weight="6" size="4">
{price}
</Text>
</Flex>
</Paper>
)
}
export const CustomCheckboxFluid = () => {
return (
<>
<CheckboxGroup fluid legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox>
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
<CheckboxGroup fluid reversed legend="Delivery Method" direction="row" name="delivery">
<CustomCheckbox>
<CheckboxCard title="Standard" price="25.00" deliveryTime="12-15 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Express" price="35.00" deliveryTime="3-6 business days" />
</CustomCheckbox>
<CustomCheckbox>
<CheckboxCard title="Super Fast" price="50.00" deliveryTime="1-3 business days" />
</CustomCheckbox>
</CheckboxGroup>
</>
)
}
Customizing Appearance
Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.
Available Properties:
/* Change the default corner of the Checkbox */
--checkbox-rad:;