Checkbox

The Checkbox is used in forms when a user needs to select multiple values from several options. Checkbox composes reakit's checkbox component.

import {
  Checkbox,
  CheckboxDescription,
  CheckboxIcon,
  CheckboxInput,
  CheckboxLabel,
  useCheckboxProps,
  useCheckboxState,
  CheckboxText,
} from "@renderlesskit/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage

<Checkbox>Label text</Checkbox>

<Checkbox>Label text</Checkbox>

Disabled

Checkbox sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg

<div className="inline-flex flex-col space-y-2">
  <Checkbox size="sm" defaultState={false} />
  <Checkbox size="md" defaultState={false} />
  <Checkbox size="lg" defaultState={false} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Checkbox size="sm" defaultState={false} />
  <Checkbox size="md" defaultState={false} />
  <Checkbox size="lg" defaultState={false} />
</div>

Checkbox Uncontrolled

Uncontrolled checkbox can be used with defaultState prop.

<div className="inline-flex flex-col space-y-2">
  <Checkbox size="md" defaultState={true} />
  <Checkbox size="md" defaultState={false} />
  <Checkbox size="md" defaultState="indeterminate" />
</div>

<div className="inline-flex flex-col space-y-2">
  <Checkbox size="md" defaultState={true} />
  <Checkbox size="md" defaultState={false} />
  <Checkbox size="md" defaultState="indeterminate" />
</div>

Checkbox UI states

<div className="inline-flex flex-col space-y-2 w-72">
  <Checkbox size="md" defaultState={false} label="Checkbox" />
  <Checkbox size="md" defaultState={false} label="Multilined label Checkbox, just for demonstration" />
  <Checkbox size="md" defaultState={false} label="Checkbox" description="Used when the checkbox is selected and will use its value for the form submission."/>
</div>

<div className="inline-flex flex-col space-y-2 w-72">
  <Checkbox size="md" defaultState={false} label="Checkbox" />
  <Checkbox size="md" defaultState={false} label="Multilined label Checkbox, just for demonstration" />
  <Checkbox size="md" defaultState={false} label="Checkbox" description="Used when the checkbox is selected and will use its value for the form submission."/>
</div>

Checkbox Disabled states

<div className="flex flex-col space-y-2 w-72">
  <Checkbox size="md" disabled defaultState={false} />
  <Checkbox size="md" disabled defaultState={false} label="Checkboxs" />
  <Checkbox size="md" disabled defaultState={false} label="Used when the checkbox is selected and will use its value for the form submission." />
  <Checkbox size="md" disabled defaultState={false} label="Checkboxs" description="Used when the checkbox is selected and will use its value for the form submission."/>
</div>

<div className="flex flex-col space-y-2 w-72">
  <Checkbox size="md" disabled defaultState={false} />
  <Checkbox size="md" disabled defaultState={false} label="Checkboxs" />
  <Checkbox size="md" disabled defaultState={false} label="Used when the checkbox is selected and will use its value for the form submission." />
  <Checkbox size="md" disabled defaultState={false} label="Checkboxs" description="Used when the checkbox is selected and will use its value for the form submission."/>
</div>

API Reference

Prop	Type	Default
`size`	`union`	`md`
`disabled`	`boolean`	`false`
`isChecked`	`boolean`	`false`
`isUnchecked`	`boolean`	`false`
`isIndeterminate`	`boolean`	`false`
`label`	`React.ReactNode`	-
`description`	`React.ReactNode`	-
`icon`	`React.ReactNode`	-

Last updated on July 18, 2022

Checkbox

Imports#

Usage#

Checkbox sizes#

Checkbox Uncontrolled#

Checkbox UI states#

Checkbox Disabled states#

API Reference#

Imports