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> ) }
Guidelines
InputChip is used to represent small pieces of information such as selections, filters, or user-provided input. It works best with short, clear labels and is commonly used to group or highlight items like categories or chosen values.
InputChips can be styled with different variant and sizes. They may also include a remove button when users need to clear a selection, or be interactive when used for filtering or toggling states, with clear visual feedback on hover and click.
For good usability, keep InputChips concise, ensure sufficient color contrast, and maintain consistent spacing when displaying multiple chips. Avoid long text or overly complex content inside them, as their purpose is to stay simple and scannable.
Code
<Badge />
import { Badge } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
colorPalette | "neutral" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "cream" | "disabled" | ||
size | "sm" | "md" | "lg" | Default "md" | |
attached | boolean | Defaults to false | |
children | React.ReactNode | Stick to one or few words | |
icon | IconComponent | Rendered to the right. Use 18px icons |