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

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>