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>

Guidelines

Choice chips, also known as option buttons, are a type of button that allows you to turn a choice on and off. They are used to filter different choices and always occur in groups of several.

Choice chips can have text, text with an icon on the left, or just an icon. Remember that the icon should be filled when something is selected and outlined otherwise.

There are three different types of choice chips: Icon chips, choice chips, and filter chips.

Icon chips

Icon chips are buttons with only an icon, no text. They are mainly used to clarify the choices you have made in an overview that is related to the results you see. They are used where it is important to use little space, but at the same time visualize the choices and quickly return to the choice alternatives.

Choice chips

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

Filter chips

Filter chips are used when actively displaying filtering of the results given. Here you clarify that the choices you have made can be crossed out and the result will change. If you design a keyword search or have a navigation pattern that changes based on selected categories, it may be wise to use Filter chips. A good example is filtering of Travel tips, where you first get a choice of location, then you get a choice of difficulty level and type of hike you want to take.

Code

`<ChoiceChip />`

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

Props

Name	Type	Description
`variant`	`"core" \| "accent" \| "floating"`
`size`	`"xs" \| "sm" \| "md" \| "lg"`	Default "sm"
`icon`	`object`
`checked`	`boolean`
`disabled`	`boolean`
`defaultChecked`	`boolean`
`onChange`	`function`
`children`	`React.ReactNode`	The label

Fundamentals

Getting started

Components

FilterChip and ChoiceChip

Examples

Filter chips

Choice chips

Guidelines

Icon chips

Choice chips

Filter chips

Code

Props