ChipInput

A multi-value field of removable chips (Enter or comma adds); bind values.

Group: Inputs · Kind: native · in the lite catalog

Preview

example

Labels

disabled · true

Labels

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Props

Prop	Type	Required	Bindable	Description
`label`	`string`	–	–	The field label.
`name`	`string`	yes	–	The field’s key in the submitted data.
`values`	`[string]`	–	yes	The entries; bind them.
`suggestions`	`[option]`	–	yes	Completions offered while typing.
`placeholder`	`string`	–	–	Hint text while empty.
`max`	`number`	–	–	The most entries allowed.
`disabled`	`boolean`	–	–	Shows it inert. Default `false`.
`checks`	`[check]`	–	–	Validation rules.

Events

on.change: runs an action
on.add: runs an action
on.remove: runs an action

Slots

None.

Children

none

A2UI basic mapping

No basic catalog component maps here.

Built from

A native component: every renderer paints it directly.

Accessibility

Role: textbox

textbox with a list of removable chips

Keys	Action
`Enter` `comma`	add the typed entry
`Backspace in an empty field`	focus the last chip, again: remove it
`ArrowLeft` `ArrowRight`	move between chips; Delete, Backspace: remove the focused chip
`ArrowDown`	open the suggestions (as Select)

Theming

Recipe parts: ChipInput/root ChipInput/label ChipInput/field ChipInput/chip ChipInput/chipLabel ChipInput/remove ChipInput/placeholder ChipInput/description ChipInput/error ChipInput/input

Keyed by: disabled :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Form · FieldGroup · FormActions · Input · Textarea · NumberField · Checkbox · Radio