Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

ChoiceChip

Use ChoiceChips for selecting one of multiple options. A function similar to radio buttons.

⚠ OBS! ChoiceChips received new functionality in version 13.2.0 of Spor. In earlier versions ChoiceChips were by default a multipleSelect, but one could send in the prop type="filter" to make it a singleSelect. In version 13.2.0 or newer, please use FilterChipsEkstern lenke to get the multipleselect functionality.

FigmaGitHub

Examples

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>

Choice chips with icons

<ChoiceChipGroup defaultValue="train">
  <ChoiceChip value="train"     icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }}>Train</ChoiceChip>
  <ChoiceChip value="bus"     icon={{ default: <BusOutline24Icon />, checked: <BusFill24Icon /> }}>Bus</ChoiceChip>
  <ChoiceChip value="boat"     icon={{ default: <FerryOutline24Icon />, checked: <FerryFill24Icon /> }}>Boat</ChoiceChip>
</ChoiceChipGroup>

Guidelines

Choice chips let users select one option from a set of choices, and are optimised for smaller screens, as it uses less space but provides a larger pressable area.

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.

Code

<ChoiceChip />

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

Props

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

<ChoiceChipGroup />

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

Props

Name
Type
Required?
Description
defaultValuestringInitial value