Components
FilterChip
Filter chips can be used for filtering content, or selecting multiple options in a group.
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" | |
icon | object | ||
checked | boolean | ||
disabled | boolean | ||
onChange | function | ||
children | React.ReactNode | The label |
<CheckboxGroup />
import { CheckboxGroup } from "@vygruppen/spor-react";
Groups Checkbox components
Props
Name | Type | Required? | Description |
|---|---|---|---|
defaultValue | string[] | Array of initially checked values | |
onCheckedChange | function | Callback for when the checkbox selection changes | |
disabled | boolean | ||
direction | "row" | "column" | "row-reverse" | "column-reverse" | Default "row" | |
gap | string | number | Space between checkboxes. Default is 1 |