Skip to content
Vy logo
  • Identitet
  • 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.

Use of icons

Filter chips should use icons consistently between their default and checked states. Choose one of the following patterns:

a. Checkmark only

  • Default: No icon
  • Checked: Checkmark icon

b. Custom icon

  • Default: Custom icon using the outline variant
  • Checked: The same custom icon using the fill variant

Do not mix these patterns. A filter chip should either introduce a checkmark when selected or transition its custom icon from outline to fill.

Code

<FilterChip />

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

Props

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

<CheckboxGroup />

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

Groups Checkbox components

Props

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