Skip to content
Vy logo
Components

InputChip

Input chips are used to select or remove single options.

Examples

A simple input chip

<InputChip>
  Input Chip
</InputChip>

Different variants

<Flex gap="1">
<InputChip>
  Core
</InputChip>
<InputChip variant="brand">
  Brand
</InputChip>
<InputChip variant="accent">
  Accent
</InputChip>
</Flex>

Different sizes

<Flex gap="1">
  <InputChip size="xs">xsmall</InputChip>
  <InputChip size="sm">small</InputChip>
  <InputChip size="md">medium</InputChip>
  <InputChip size="lg">large</InputChip>
</Flex>

Controlled

() => {
  const [choices, setChoices] = React.useState(["train", "boat", "bus", "metro"]);
  const items = ["train", "boat", "bus", "metro"]
  const removeItem = (item: string) => {
    setChoices(choices.filter((c) => c != item))
  }
  return (
    <Flex gap="1">
       {choices.map((item) => (
         <InputChip key={item} onClick={() => removeItem(item)} endIcon={CloseOutline24Icon}>
           {item}
         </InputChip>
       ))}
    </Flex>
  )
}