TagInput

Props

• aria-label
  string

  The accessible name, for when there is no visible label.

• defaultValue
  string[]

  The tags on first render.

• description
  ReactNode

  One sentence of help under the label.

• disabled
  boolean

  Turns it off: it can't be used, and it looks dimmed.

• id
  string

  The id of the control, so a label elsewhere can point to it.

• label
  ReactNode

  The visible label.

• layout
  "horizontal" | "vertical"

  The label above the control (vertical) or beside it (horizontal).

• name
  string

  The field name the value is sent under in a form.

• onValueChange
  ((value: string[]) => void)

  Called with the tags whenever one is added or removed.

• optional
  boolean

  Adds “Optional” to the label, for forms where most fields are required.

• placeholder
  string

  Text shown while there is no value.

• required
  boolean

  Marks it as required in a form.

• separators
  string[]

  Characters that end a tag, besides Enter.

• validate
  ((tag: string) => string | true)

  Return true for a valid tag, or a message saying what is wrong. Invalid tags stay, marked with a danger ring, and show the message as their tooltip (and to a screen reader); errors are never drawn under the field, so toast it too when someone submits.

• value
  string[]

  The tags, when you control them.