Components
ChoiceChip
Use ChoiceChips for selecting one of multiple options. A function similar to radio buttons.
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 |
|---|---|---|---|
checked | boolean | ||
children | React.ReactNode | The label | |
defaultChecked | boolean | ||
disabled | boolean | ||
icon | object | ||
onChange | function | ||
size | "xs" | "sm" | "md" | "lg" | Default "sm" | |
value | string | The value of the choicechip | |
variant | "core" | "accent" | "floating" |
<ChoiceChipGroup />
import { ChoiceChipGroup } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
defaultValue | string | Initial value | |
onValueChange | function | Function called once a radio is checked | |
value | string | The controlled value of the choicechip group |