Skip to content
Vy logo
Components

Choice chip (new)

Choice chips make it possible to turn functionality on and off, or select a single option.

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>