PillsInput

import { PillsInput, Pill } from '@tidbcloud/uikit'

import { PillsInput, Pill } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <PillsInput label="PillsInput">
      <Pill.Group>
        <Pill>React</Pill>
        <Pill>Vue</Pill>
        <Pill>Svelte</Pill>
        <PillsInput.Field placeholder="Enter tags" />
      </Pill.Group>
    </PillsInput>
  )
}

import { useState } from 'react'
import { PillsInput, Pill } from '@tidbcloud/uikit'
 
function Demo() {
  const [values, setValues] = useState(['React', 'Vue'])
 
  const handleRemove = (val: string) => {
    setValues((current) => current.filter((v) => v !== val))
  }
 
  const pills = values.map((item) => (
    <Pill key={item} withRemoveButton onRemove={() => handleRemove(item)}>
      {item}
    </Pill>
  ))
 
  return (
    <PillsInput label="Technologies">
      <Pill.Group>
        {pills}
        <PillsInput.Field placeholder="Add more" />
      </Pill.Group>
    </PillsInput>
  )
}

import { useState } from 'react'
import { PillsInput, Pill, Combobox, useCombobox } from '@tidbcloud/uikit'
 
const data = ['React', 'Vue', 'Angular', 'Svelte']
 
function Demo() {
  const combobox = useCombobox()
  const [search, setSearch] = useState('')
  const [value, setValue] = useState<string[]>([])
 
  const handleValueSelect = (val: string) =>
    setValue((current) => (current.includes(val) ? current.filter((v) => v !== val) : [...current, val]))
 
  const pills = value.map((item) => (
    <Pill key={item} withRemoveButton onRemove={() => handleValueSelect(item)}>
      {item}
    </Pill>
  ))
 
  return (
    <Combobox store={combobox} onOptionSubmit={handleValueSelect}>
      <Combobox.DropdownTarget>
        <PillsInput onClick={() => combobox.openDropdown()}>
          <Pill.Group>
            {pills}
            <Combobox.EventsTarget>
              <PillsInput.Field
                value={search}
                onChange={(e) => setSearch(e.currentTarget.value)}
                placeholder="Search..."
              />
            </Combobox.EventsTarget>
          </Pill.Group>
        </PillsInput>
      </Combobox.DropdownTarget>
 
      <Combobox.Dropdown>
        <Combobox.Options>
          {data
            .filter((item) => item.toLowerCase().includes(search.toLowerCase()))
            .map((item) => (
              <Combobox.Option key={item} value={item}>
                {item}
              </Combobox.Option>
            ))}
        </Combobox.Options>
      </Combobox.Dropdown>
    </Combobox>
  )
}