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.

Choose Colors
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'
Choose Colors
Choose Colors
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

Choose Your Best option
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'
Delivery Method
Delivery Method
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

Delivery Method
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'
Choose Your Best option
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
Delivery Method
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
Delivery Method
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
Delivery Method
Delivery Method
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:;