Checkbox
A yes/no choice for forms, with a checked, unchecked and indeterminate state and a springy tick.
<Checkbox label="Preview builds" description="Build every pull request on its own URL." defaultChecked />Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/checkbox.jsonThe CLI writes components/ikada/checkbox.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Checkbox } from "@sproutboat/ikada";
Usage
import { Checkbox } from "@/components/ikada/checkbox";
<Checkbox label="Preview builds" description="Build every pull request on its own URL." defaultChecked />Examples
<Checkbox label="Unchecked" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Mixed" indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox
label="Run migrations first"
description="Blocks the traffic shift until they pass."
/><Checkbox label="I understand robin goes offline during the move" invalid /><Checkbox aria-label="Select wren" />Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| label | ReactNode | Visible label. Without one, pass aria-label. |
| description | ReactNode | Muted line under the label, linked to the checkbox as its description. |
| invalid | boolean | Marks the checkbox invalid: danger ring and aria-invalid. |
| style | CSSProperties | ((state: CheckboxRootState) => CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CheckboxRootState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Also takes every prop of Omit<ComponentProps<typeof BaseCheckbox.Root>, "className" | "children">.
Source: src/components/checkbox.tsx