Orvain UI

Comma tags

Free-text tagging: type, a comma commits, suggestions match as you go.

Get Pro to installPro11 blocksReact, Vue and Figma
MCPConnect the MCP server

Tag this component

Tags help people find it in the library.

Design systemAccessibility audit

Type a tag and press Enter, or paste a comma-separated list.

More in Tag Inputs#

People picker

Sharing and assignment: pick a few people or groups, up to a limit

People picker, seats

Pickers with a hard limit that should read as seats filling up

People picker, roles

Sharing sheets: add people as rows and give each one an access level

Overflow tags

Narrow fields: chips fold into a counter that opens the folded ones

Overflow tags, fold

Narrow fields where seeing everything in place beats a second card: the counter unfolds the field

Overflow tags, tray

Narrow fields where the counter and the field open one card: what is in, or everything

Comma tags

Free-text tagging: type, a comma commits, suggestions match as you go

Comma tags, ghost

Free-text tagging without a floating menu: the best match is the grey completion

Comma tags, sorted

Tagging from a library whose tags have kinds: the menu groups, the chips tint

Stack picker

Long option lists that carry a count: swatch chips wrap, the field grows and the chevron keeps its own column

Stack swatches

Colour or avatar-like choices that read best as a stack: the picks overlap, the menu is a grid

When to use#

  • A recipient field taking a few people or groups, up to a stated cap
  • Free-text labelling where the vocabulary grows as people use it
  • Multi-select filters whose chosen values must stay on screen while the reader works
  • A narrow field where chips have to fold into a counter rather than push the layout around

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans