Skip to content
Vy logo
Components

Filter Chip

Choice chips make it possible to turn functionality on and off, or select one or more options.

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>