Inputs@knitui/components

Checkbox

Checkbox is a cross-platform toggle control. variant sets how the active colour ramp is applied; size scales the box, icon and label together. Compose Checkbox.Group for multi-select lists, Checkbox.Card for card-style toggles, and Checkbox.Indicator for a read-only presentational box.

WebiOSAndroid6 style slots17 own props16 examples

Stories Source Tests Open in Storybook

import { Checkbox } from "@knitui/components";

Playground

Loading playground…

variantVisual style — filled fills the box with the accent colour; outline tints the border and icon only.

sizeControls the box dimensions, icon size and label metrics.

themeAccent theme applied to the checkbox box and icon.

labelPositionPosition of the label relative to the checkbox box.

disabled

false

indeterminate

false

readOnly

true

label

description

error

Playground

<Checkbox
  label="Accept terms and conditions"
  variant="filled"
  size="sm"
  disabled={false}
  indeterminate={false}
  readOnly
/>

Examples

Variants

Both visual variants at the default size, checked and unchecked.

Loading example…

VariantsSource Storybook

Sizes

Full seven-step size scale.

Loading example…

SizesSource Storybook

Disabled

Disabled state — the box is dimmed and cannot be toggled.

Loading example…

DisabledSource Storybook

Indeterminate

Indeterminate state — aria-checked is "mixed" to indicate partial selection.

Loading example…

IndeterminateSource Storybook

With Label And Description

Label, description and error message rendered together.

Loading example…

With Label And DescriptionSource Storybook

Controlled

Controlled — checked state is owned by the parent; prints current value below.

Loading example…

ControlledSource Storybook

Read Only

Read-only — the value is visible but cannot be changed.

Loading example…

Read OnlySource Storybook

Group

Checkbox.Group manages an array of selected values across multiple checkboxes.

Loading example…

GroupSource Storybook

Group Max Values

Checkbox.Group with a maximum number of selections enforced.

Loading example…

Group Max ValuesSource Storybook

Card

Checkbox.Card renders a pressable card that functions as a checkbox.

Loading example…

CardSource Storybook

Card Shadows

Checkbox.Card with the shadow elevation prop across the shadow ladder.

Loading example…

Card ShadowsSource Storybook

Indicator

Checkbox.Indicator is a presentational-only box with no press handler.

Loading example…

IndicatorSource Storybook

Themes

Accent themes use Tamagui theme, not a public color prop.

Loading example…

ThemesSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the box square and the label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	Extra element id(s) to merge into the control's `aria-describedby`.
`checked`	`boolean \| undefined`	—	Controlled checked state.
`defaultChecked`	`boolean \| undefined`	`false`	Initial checked state for the uncontrolled case.
`description`	`ReactNode`	—	Description rendered below the label.
`disabled` system	`boolean \| undefined`	`false`	Disables the checkbox.
`error`	`ReactNode`	—	Error rendered below the description (string nodes get the error theme).
`icon`	`CheckboxIconComponent \| undefined`	—	Icon component for the checked / indeterminate state.
`iconColor`	`GetThemeValueForKey<"color"> \| OpaqueColorValue \| undefined`	—	Override the icon colour (defaults to the contrast/accent colour).
`id`	`string \| undefined`	—	Id used to bind the control and label; auto-generated when omitted.
`indeterminate`	`boolean \| undefined`	`false`	Indeterminate state. When set, `checked` is ignored for display.
`label`	`ReactNode`	`Accept terms and conditions`	Label content rendered next to the control.
`labelPosition`	`"left" \| "right" \| undefined` left · right	`'right'`	Position of the label relative to the checkbox box.
`onChange`	`((checked: boolean) => void) \| undefined`	—	Called with the next checked state. Mirrors Mantine's `onChange` name; the payload is a boolean (not a DOM event) because the kit is cross-platform.
`onCheckedChange`	`((checked: boolean) => void) \| undefined`	—
`radius` system	`string \| number \| undefined`	—
`readOnly`	`boolean \| undefined`	`false`	If set, the value cannot be changed but the control stays focusable.
`rootRef`	`Ref<TamaguiElement> \| undefined`	—	Ref of the root wrapper element.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls the box dimensions, icon size and label metrics.
`styles` system	`SlotStyles<CheckboxStyles> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Own slots: `box` (the square) / `icon` (the glyph); plus the inherited chrome slots `label` / `description` / `error` / `root` forwarded to the `InlineControl`.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Accent theme applied to the checkbox box and icon.
`value`	`string \| undefined`	—	Value reported to a surrounding `Checkbox.Group`.
`variant` system	`CheckboxVariant \| undefined` filled · outline	`'filled'`	Visual style — filled fills the box with the accent colour; outline tints the border and icon only.
`withErrorStyles`	`boolean \| undefined`	`true`	Apply error styles to the box when `error` is set.

Style slots

Every part of Checkbox can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`box`	`styles={{ box: { … } }}`
`description`	`styles={{ description: { … } }}`
`error`	`styles={{ error: { … } }}`
`icon`	`styles={{ icon: { … } }}`
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.