Skip to content
Vy logo
Components

FilterChip and ChoiceChip

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

Examples

Filter chips

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>

Choice chips

Simple example with default value

<ChoiceChipGroup defaultValue="train">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
  <ChoiceChip value="boat">Boat</ChoiceChip>
</ChoiceChipGroup>

Different variants: 

<Stack direction="column">
Core
<ChoiceChipGroup variant="core">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
  <ChoiceChip value="boat">Boat</ChoiceChip>
</ChoiceChipGroup>
Accent
<ChoiceChipGroup variant="accent">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
  <ChoiceChip value="boat">Boat</ChoiceChip>
</ChoiceChipGroup>
Floating
<ChoiceChipGroup variant="floating">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
  <ChoiceChip value="boat">Boat</ChoiceChip>
</ChoiceChipGroup>
</Stack>

Different sizes: 

<Stack direction="column">
XSmall
<ChoiceChipGroup size="xs">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
</ChoiceChipGroup>
Small
<ChoiceChipGroup size="sm">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
</ChoiceChipGroup>
Medium
<ChoiceChipGroup size="md">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
</ChoiceChipGroup>
Large
<ChoiceChipGroup size="lg">
  <ChoiceChip value="train">Train</ChoiceChip>
  <ChoiceChip value="bus">Bus</ChoiceChip>
</ChoiceChipGroup>
</Stack>