Checkbox

The Checkbox component allows users to select one or more options from a set. Supports different states, colors, and group functionality.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽³⁵⁾

Playground

Basics

Controlled checkbox example with a helper message that reacts to user selection.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
checked
,
 setChecked
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<Block
 
w
=
{
600
}
>
    
<Checkbox
      
label
=
"Accept terms and conditions"
      
description
=
{
checked 
?
 
'Thanks! You can proceed to the next step.'
 
:
 
'Check the box to continue.'
}
      
checked
=
{
checked
}
      
onChange
=
{
setChecked
}
    
/>
    
</Block
>
  
)
;
}

Sizes

Explore available checkbox sizes with guidance on where each fits best.

Loading demo…

import
 
{
 
Block
,
 
Checkbox
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
>
          
<Checkbox
 
size
=
{
size
}
 defaultChecked 
/>
          
<Text
 
variant
=
"small"
>
{
size
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Colors

Toggle checkboxes styled with semantic color options and a default-checked example.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
COLORS
 
=
 
[
'primary'
,
 
'secondary'
,
 
'success'
,
 
'warning'
,
 
'error'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
values
,
 setValues
]
 
=
 useState
<Record
<
string
,
 
boolean
>>
(
{
}
)
;
 
  
const
 toggle 
=
 
(
color
:
 
string
)
 
=>
 
{
    
setValues
(
(
current
)
 
=>
 
(
{
      
.
.
.
current
,
      
[
color
]
:
 
!
current
[
color
]
    
}
)
)
;
  
}
;
 
  
return
 
(
    
<Block
>
      
<Text
 
weight
=
"medium"
>
Semantic
 colors
</Text
>
      
<Block
>
        
{
COLORS
.
map
(
(
color
)
 
=>
 
(
          
<Checkbox
            
key
=
{
color
}
            
color
=
{
color
}
            
label
=
{
`Color: ${color}`
}
            
checked
=
{
Boolean
(
values
[
color
]
)
}
            
onChange
=
{
(
)
 
=>
 
toggle
(
color
)
}
          
/>
        
)
)
}
      
</Block
>
      
<Checkbox
        
color
=
"success"
        
label
=
"Default checked"
        defaultChecked
      
/>
      
<Text
 
variant
=
"small"
 
color
=
"muted"
>
        
Use
 
`color`
 to match checkbox accents with message intent 
while
 keeping labels readable
.
      
</Text
>
    
</Block
>
  
)
;
}

States

Highlight enabled, disabled, required, and error states to cover validation scenarios.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
enabled
,
 setEnabled
]
 
=
 
useState
(
true
)
;
  
const
 
[
required
,
 setRequired
]
 
=
 
useState
(
true
)
;
  
const
 
[
withError
,
 setWithError
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<Block
>
      
<Checkbox
 
label
=
"Enabled"
 
checked
=
{
enabled
}
 
onChange
=
{
setEnabled
}
 
/>
      
<Checkbox
 
label
=
"Disabled"
 
checked
=
{
false
}
 disabled 
/>
      
<Checkbox
 
label
=
"Required"
 required 
checked
=
{
required
}
 
onChange
=
{
setRequired
}
 
/>
      
<Checkbox
        
label
=
"With error"
        
error
=
{
withError 
?
 
'Selection required'
 
:
 
undefined
}
        
checked
=
{
withError
}
        
onChange
=
{
setWithError
}
      
/>
    
</Block
>
  
)
;
}

Indeterminate

Demonstrates a parent checkbox that toggles a group and reflects partial selection with indeterminate.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 
ITEMS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
selected
,
 setSelected
]
 
=
 useState
<
number
[
]
>
(
[
]
)
;
  
const
 allIds 
=
 
ITEMS
.
map
(
(
item
)
 
=>
 item
.
id
)
;
  
const
 allChecked 
=
 selected
.
length 
===
 
ITEMS
.
length
;
  
const
 someChecked 
=
 selected
.
length 
>
 
0
 
&&
 
!
allChecked
;
 
  
const
 toggleAll 
=
 
(
)
 
=>
 
{
    
setSelected
(
(
current
)
 
=>
 
(
current
.
length 
===
 
ITEMS
.
length 
?
 
[
]
 
:
 allIds
)
)
;
  
}
;
 
  
const
 toggleItem 
=
 
(
id
:
 
number
)
 
=>
 
{
    
setSelected
(
(
current
)
 
=>
      current
.
includes
(
id
)
 
?
 current
.
filter
(
(
itemId
)
 
=>
 itemId 
!==
 id
)
 
:
 
[
.
.
.
current
,
 id
]
    
)
;
  
}
;
 
  
return
 
(
    
<Block
>
      
<Checkbox
        
label
=
{
`Select all (${selected.length}/${ITEMS.length})`
}
        
checked
=
{
allChecked
}
        
indeterminate
=
{
someChecked
}
        
onChange
=
{
toggleAll
}
      
/>
      
<Block
 
pl
=
"md"
>
        
{
ITEMS
.
map
(
(
{
 id
,
 label 
}
)
 
=>
 
(
          
<Checkbox
            
key
=
{
id
}
            
label
=
{
label
}
            
checked
=
{
selected
.
includes
(
id
)
}
            
onChange
=
{
(
)
 
=>
 
toggleItem
(
id
)
}
          
/>
        
)
)
}
      
</Block
>
    
</Block
>
  
)
;
}

Descriptions

Descriptions and helper text

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Checkbox
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
newsletter
,
 setNewsletter
]
 
=
 
useState
(
false
)
;
  
const
 
[
termsAccepted
,
 setTermsAccepted
]
 
=
 
useState
(
false
)
;
 
  
return
 
(
    
<Block
 
style
=
{
{
 maxWidth
:
 
400
 
}
}
>
      
<Checkbox
        
label
=
"Receive product updates"
        
description
=
"Get occasional emails about new features and improvements."
        
checked
=
{
newsletter
}
        
onChange
=
{
setNewsletter
}
      
/>
      
<Checkbox
        
label
=
"Accept terms of service"
        
description
=
"Required before creating an account."
        
error
=
{
termsAccepted 
?
 
undefined
 
:
 
'Please accept to continue.'
}
        
checked
=
{
termsAccepted
}
        
onChange
=
{
setTermsAccepted
}
        required
      
/>
      
<Text
 
variant
=
"small"
 
color
=
"muted"
>
        
Use
 
`description`
 
for
 supporting copy and pair with 
`error`
 to surface validation details
.
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Checkbox

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap