Skip to content
Fulldev UI

Checkbox

A native, styled checkbox input element. 
--- 
import { Checkbox } from 'fulldev-ui'
---

<Checkbox
  label={"Checkbox"}
  name={"checkbox"}
  size="md"
  color="base"
  contrast={false}
/>

Props

<Checkbox>

Prop Type Default
label Label | Label['html'] -
name string -
disabled boolean -
required boolean -
checked boolean -
size sm | md | lg -
color base | brand -
contrast boolean -
as HTMLTag div
HTML Attributes Polymorphic<as> -

<CheckboxElement>

Prop Type Default
name string -
disabled boolean -
required boolean -
checked boolean -
size sm | md | lg -
HTML Attributes HTMLAttributes<input> -

Examples

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

 
---
import { Checkbox } from 'fulldev-ui'
---


<Checkbox name="checkbox" size="sm" />
<Checkbox name="checkbox" size="md" />
<Checkbox name="checkbox" size="lg" />

compact

The compact prop changes the underlying values used by the size prop. Just like the size prop it cascades, which means it is inherited from the parent and it is applied to all children.

With the compact prop you are able to use the same component in different contexts, like in a large hero or a small card. It will automatically adapt.

 
---
import { Checkbox } from 'fulldev-ui'
---


<Checkbox name="checkbox" compact size="sm" />
<Checkbox name="checkbox" compact size="md" />
<Checkbox name="checkbox" compact size="lg" />