Skip to content
Design system

TokenInput

Point at a token instead of a raw value.

import { TokenInput } from "@flinbu/seed";

Background token

Prefer semantic tokens.

import { Field, TokenInput } from "@flinbu/seed";

const [v, setV] = React.useState<string | null>("bg-accent-solid");

<div className="flex w-full max-w-sm flex-col gap-sm">
  <Field label="Background" hint="Prefer semantic tokens."><TokenInput tokens={TOKENS} value={v} onValueChange={setV} clearable /></Field>
</div>

Use it for

  • Setting a component property.

Use something else for

  • Free values: use NumberInput or ColorPicker.

Props

PropTypeDefaultDescription
tokens{ name, value?, color?, kind?, icon?, group? }[]–The options; semantic first.
value / onValueChangestringnull–The token name.
clearable / placeholder / size…–Combobox props.

Accessibility

  • A Combobox: type to search by name or value, arrows to move, Enter to pick.