Checkbox

Checkbox component is used in forms when a user needs to select multiple values from several options.

Import

import { Checkbox } from "@deca-ui/react"

Usage

Checkbox

<Checkbox initialCheck label="Checkbox" />

Disabled

Use the disabled prop to disable the Checkbox.

Checkbox

<Checkbox disabled label="Checkbox" />
<Checkbox initialCheck disabled label="Checkbox" />

Sizes

Use the size prop to change the size of the Checkbox. You can set the value to sm, md, or lg.

Small

Medium

Large

<Checkbox size="sm">Small</Checkbox>
<Checkbox size="md">Medium</Checkbox>
<Checkbox size="lg">Large</Checkbox>

Colors

Use the color prop to change the color of the Checkbox. You can set the value to primary, secondary, success, warning or error.

<Checkbox initialCheck color="primary" label="Primary" />
<Checkbox initialCheck color="secondary" label="Secondary" />
<Checkbox initialCheck color="warning" label="Warning" />
<Checkbox initialCheck color="success" label="Success" />
<Checkbox initialCheck color="error" label="Error" />

Checkbox Group

Harry Potter

The Great Gatsby

The Hobbits

<Checkbox.Group
  defaultValue={["A", "C"]}
  css={{ flexDirection: "row", gap: "$3", flexWrap: "wrap" }}
>
  <Checkbox initialCheck value="A" label="Harry Potter" />
  <Checkbox initialCheck value="B" label="The Great Gatsby" />
  <Checkbox initialCheck value="C" label="The Hobbits" />
</Checkbox.Group>

Made by Heril Saha

Contents