Components

TokenField

Enter multiple string values as tokens with suggestions and custom values.

Props

TokenFieldProps props

Prop	Type	Default	Description
`values`	`string[]`	—	Controlled values.
`defaultValues`	`string[]`	—	Initial uncontrolled values.
`onChange`	`(values: string[]) => void`	—	Change handler.
`suggestions`	`string[]`	—	Dropdown suggestions as the user types. Already-added values are hidden.
`placeholder`	`string`	`"Add…"`	Placeholder text.
`allowCustom`	`boolean`	`true`	Allow values not present in suggestions.
`mono`	`boolean`	—	Monospace font for tokens and input.
`size`	`"sm" \| "md"`	`"sm"`	Minimum control height, using Input and Select sizes. Wrapped tokens can increase the height.
`disabled`	`boolean`	—	Prevents interaction.
`className`	`string`	—	Additional CSS class.
`aria-label`	`string`	—	Accessibility label for the inner input.

Type to filter the suggestion dropdown. Suggestions that are already added are hidden from the list.

TokenField

When allowCustom is true (the default), the user can type any value and press Enter to add it, even if it's not in the suggestions list.

TokenField: custom values

Set mono for a monospace token style, useful for identifiers, keys, or environment codes.

TokenField: mono

ImportTSX

import { TokenField } from "@solarius/onset";