Native

TagInput

Tags as chips inside the field, with suggestions. Comma, space or return confirms a tag (separators changes which characters do); backspace on an empty field removes the last.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md; setup for every native component is on React Native.

Component	Notes
`TagInput`	Chips-in-input tag field with autocomplete. Comma/space/return confirm (`separators` to change), Backspace removes last. `onLeather` variant for ghost-on-leather.

Chips-in-input tag field. Type to add; a separator (comma or space by default) confirms a chip; return also confirms; Backspace on an empty input removes the last chip. Autocompletes from suggestions.

import { TagInput, Field } from 'achery-ui/native'

<Field label="Tags">
  <TagInput value={tags} onChange={setTags} suggestions={known} placeholder="Add tags…" />
</Field>

// Ghost-on-leather, e.g. over a shoot-mode HUD
<TagInput value={tags} onChange={setTags} onLeather />

// Phrases ("the Captain"): only comma or return confirms, and case is kept
<TagInput value={aliases} onChange={setAliases} separators={[',']} normalize={(raw) => raw.trim()} />

Prop	Type	Default
`value`	`string[]`	required
`onChange`	`(tags: string[]) => void`	required
`suggestions`	`string[]`	`[]`
`placeholder`	`string`	—
`onLeather`	`boolean`	`false` (gold-deep chips + cream text)
`normalize`	`(raw: string) => string`	lowercase + trim + collapse whitespace
`separators`	`string[]`	`[',', ' ']` (characters that confirm a chip; return always does)
`disabled`	`boolean`	`false`
`accessibilityLabel`	`string`	the `placeholder` (names the text field)