Skip to content
Vy logo
  • Spor
  • Resources
Components

FilterChip

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

FigmaGitHub

Code examples

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

Guidelines

Filter chips are buttons that are often used to define a result. You should be able to turn all filter chips on and off and get results accordingly. For example, in a travel search where you want to see bus and train trips from only one provider, or in a feedback modal where you can select multiple categories.

There should be several choices in a filter group, and they should be horizontally placed, or grouped together like a cloud.

Code

<FilterChip />

import { FilterChip } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
variant"core" | "accent" | "floating"
size"xs" | "sm" | "md" | "lg"Default "sm"
iconobject
checkedboolean
disabledboolean
onChangefunction
childrenReact.ReactNodeThe label

<CheckboxGroup />

import { CheckboxGroup } from "@vygruppen/spor-react";

Groups Checkbox components

Props

Name
Type
Required?
Description
defaultValuestring[]Array of initially checked values
onCheckedChangefunctionCallback for when the checkbox selection changes
disabledboolean
direction"row" | "column" | "row-reverse" | "column-reverse"Default "row"
gapstring | numberSpace between checkboxes. Default is 1