Inputs@knitui/components

Chip

Chip is a pill-shaped toggle that functions as a checkbox or radio button. Accent comes from the active theme palette ramp via the theme prop. Inside a Chip.Group it defers its checked state to the group for single- or multi-select behaviour.

WebiOSAndroid3 style slots6 own props13 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

variantVisual style — how the theme color ramp is applied.

sizeControls height, horizontal padding, gap and font size.

themeAccent theme applied to the checked state.

disabled

false

checked

false

defaultChecked

false

children

Playground

<Chip
  variant="outline"
  size="sm"
  disabled={false}
>
  Chip
</Chip>

Examples

Variants

Every visual variant side by side, unchecked and checked.

Loading example…

VariantsSource Storybook

Sizes

Full seven-step size scale.

Loading example…

SizesSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Themes

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

Loading example…

ThemesSource Storybook

Disabled

Disabled state — reduced opacity and no interaction.

Loading example…

DisabledSource Storybook

Default Checked

Checked by default (uncontrolled) — shows the built-in check glyph.

Loading example…

Default CheckedSource Storybook

Custom Icon

Custom icon replaces the default check glyph when the chip is toggled on.

Loading example…

Custom IconSource Storybook

Controlled

Controlled chip — parent owns the checked state via React.useState.

Loading example…

ControlledSource Storybook

Group Single Select

Chip.Group (single-select) — clicking a chip deselects the previous one.

Loading example…

Group Single SelectSource Storybook

Group Multi Select

Chip.Group (multiple) — chips act as checkboxes; any number can be selected.

Loading example…

Group Multi SelectSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the root frame and the label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`checked`	`boolean \| undefined`	—	Controlled checked state.
`children`	`ReactNode`	`Chip`	Chip label.
`defaultChecked`	`boolean \| undefined`	—	Uncontrolled initial checked state.
`disabled` system	`boolean \| undefined`	`false`
`icon`	`ReactNode`	—	Replaces the default check glyph shown when checked. `null`/`false` hides it.
`onChange`	`((checked: boolean) => void) \| undefined`	—	Called when the checked state changes.
`radius` system	`string \| number \| undefined`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`sm`	Controls height, horizontal padding, gap and font size.
`styles` system	`SlotStyles<ChipSlots> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Slots: `root` (the chip frame) / `label` (the chip's text) / `icon` (the leading check glyph). Shares the kit-wide vocabulary so styling "the label of a control" works the same as elsewhere.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Accent theme applied to the checked state.
`value`	`string \| undefined`	—	Identifies this chip inside a `Chip.Group`.
`variant` system	`ChipVariant \| undefined` outline · filled · light	`"outline"`	Visual style — how the theme color ramp is applied.

Style slots

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

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

Accessibility & DOM props (2)

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

Plus 497 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.