ComponentsUpdated
ChoiceChip
Use ChoiceChips for selecting one of multiple options. A function similar to radio buttons.
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 FilterChips to get the multipleselect functionality.
Code examples
<ChoiceChipGroup defaultValue="train"> <ChoiceChip value="train">Train</ChoiceChip> <ChoiceChip value="bus">Bus</ChoiceChip> <ChoiceChip value="boat">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. When using an icon, follow these guidelines:
- 18x18 icons should be used for choicechip with size=”xs”
- 24x24 should be used where size is “sm“ or “md“
- 30x30 icons should be used for size “lg”.
- Use outline icons when a choice chip is unselected, and filled icons when it is selected.
Code
<ChoiceChip />
import { ChoiceChip } 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 | ||
defaultChecked | boolean | ||
onChange | function | ||
children | React.ReactNode | The label |
<ChoiceChipGroup />
import { ChoiceChipGroup } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
defaultValue | string | Initial value |