Skip to content
Vy logo
Components

FilterChip

Filter chips can be used for filtering content, or selecting multiple options in a group.

Examples

Simple example with default value

<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train">Train</FilterChip>
  <FilterChip value="bus">Bus</FilterChip>
  <FilterChip value="boat">Boat</FilterChip>
</CheckboxGroup>

Different variants

<Stack direction="column">
Core
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train">Train</FilterChip>
  <FilterChip value="bus">Bus</FilterChip>
  <FilterChip value="boat">Boat</FilterChip>
</CheckboxGroup>
Accent
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" variant="accent">Train</FilterChip>
  <FilterChip value="bus" variant="accent">Bus</FilterChip>
  <FilterChip value="boat" variant="accent">Boat</FilterChip>
</CheckboxGroup>
Floating
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" variant="floating">Train</FilterChip>
  <FilterChip value="bus" variant="floating">Bus</FilterChip>
  <FilterChip value="boat" variant="floating">Boat</FilterChip>
</CheckboxGroup>
</Stack>

Different sizes: 

<Stack direction="column">
XSmall
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" size="xs">Train</FilterChip>
  <FilterChip value="bus" size="xs">Bus</FilterChip>
</CheckboxGroup>
Small
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" size="sm">Train</FilterChip>
  <FilterChip value="bus" size="sm">Bus</FilterChip>
</CheckboxGroup>
Medium
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" size="md">Train</FilterChip>
  <FilterChip value="bus" size="md">Bus</FilterChip>
</CheckboxGroup>
Large
<CheckboxGroup defaultValue={["train"]}>
  <FilterChip value="train" size="lg">Train</FilterChip>
  <FilterChip value="bus" size="lg">Bus</FilterChip>
</CheckboxGroup>
</Stack>

With icons: 

<CheckboxGroup>
  <FilterChip value="train" icon={{default: <TrainOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Train</FilterChip>
  <FilterChip value="bus" icon={{default: <BusOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Bus</FilterChip>
  <FilterChip value="boat" icon={{default: <FerryOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Boat</FilterChip>
</CheckboxGroup>