Components
Filter Chip
Choice chips make it possible to turn functionality on and off, or select one or more options.
Examples
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>
With icons:
<CheckboxGroup> <FilterChip value="train" icon={{default: <TrainOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Train</FilterChip> <FilterChip value="bus" icon={{default: <BusOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Bus</FilterChip> <FilterChip value="boat" icon={{default: <FerryOutline24Icon />, checked: <CheckmarkFill24Icon /> }}>Boat</FilterChip> </CheckboxGroup>
Guidelines
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 |