Inputs

Tag chips field

A text field that turns each entry into a small removable chip, for collecting a short list of keywords or labels.

Launch planbeta feedbackpricing page

designresearchmobile appa11y

Using Tag chips field

A text field that turns each entry into a small removable chip, for collecting a short list of keywords or labels.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: placeholder, accent

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.

2760Character budget counterInputsA compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out.

2321Clean Text FieldInputsA no-frills bordered text input for a labeled form: neutral at rest, a crisp accent ring on focus, muted when disabled.

2793Curved input barInputsA pill text field bent into a gentle upward arc, with the typed text, caret and submit button following the same curve.

2795Elastic tug sliderInputsA slider that stretches like an elastic band when dragged past its ends, snapping the track back with a bounce once released.

1529Floating label inputInputsA text field whose label rests inside the box and rises to the top edge on focus or once the field has a value, with focused, valid and invalid looks.