Skip to main content
⌘K
Last modified: 24/Jun/2024

TagInput

The TagInput component can be used when you want to offer a handful of options to the user to choose from (usually more than what would be ideal for a Checkbox), or it can be used with a dynamic value set that is set by the user. The TagInput is the crossover of an input and select.

#Usage

import { useState } from 'react'
import { TagInput } from '@kinsta/stratus'

const MyComponent = () => {
  const lightSide = ['Han', 'Luke', 'Leia', 'R2D2', 'C3PO', 'Chewbacca', 'Lando', 'Yoda', 'Obi-Wan']
  const selected: string[] = []
  const [heroes, addHero] = useState(selected)

  return <TagInput value={heroes} setValue={addHero} suggestions={lightSide} />
}

#Props

#value
string[]
State variable for tracking selections made by the user
#onChange
(value: string[]) => void
#suggestions
string[]
Available selections in the dropdown
#onlySuggestions
boolean
Controls whether items not included in suggestions can be added to value
#isDense
boolean
Decides whether the tag input and tags appear in a smaller size.
#isDisabled
boolean
Set the disabled state of input
#hasAutoFocus
boolean
Set that the input should be focused when rendered
#hasError
boolean
Set the error state of the input
#label
string
Content of the label
#placeholder
string
Placeholder for the input element
#floatingTag
keyof IntrinsicElements | ComponentType
Custom element for the floating wrapper
#shouldOpenOnFocus
boolean
TagInput opens upon input gaining focus

#Types

  • TagInputProps: props of the TagInput component processed by stratus

Read more about types here