Park UI Logo
GitHub
Components
Checkbox

Checkbox

A control element that allows for multiple selections within a set.

Usage

import { Checkbox, type CheckboxProps } from '~/components/ui'

export const Demo = (props: CheckboxProps) => {
  return (
    <Checkbox defaultChecked {...props}>
      Label
    </Checkbox>
  )
}

Examples

Indeterminate

The indeterminate state signifies a checkbox with only some of its related options selected.

<Checkbox checked="indeterminate" />

With a different color

By default, the checkbox uses the accent color from the theme. To render a checkbox with a different color, use the colorPalette prop.

<Checkbox colorPalette="red" defaultChecked />

Installation

npx @park-ui/cli components add checkbox