Site settings
Change the appearance of the site to suit your preferences
ChoiceChip
Choice chips make it possible to turn functionality on and off, or select one or more options.
Choice chip with text only
<Stack flexDirection="row"> <ChoiceChip>Train</ChoiceChip> <ChoiceChip>Bus</ChoiceChip> <ChoiceChip>Boat</ChoiceChip> </Stack>
You can also use CheckboxGroup to group multiple choicechips
<CheckboxGroup defaultValue={["train"]}> <ChoiceChip value="train">Train</ChoiceChip> <ChoiceChip value="bus">Bus</ChoiceChip> <ChoiceChip value="boat">Boat</ChoiceChip> </CheckboxGroup>;
And make this controlled if you want
() => { const [value, setValue] = React.useState(["train"]); return ( <CheckboxGroup value={value} onValueChange={(v) => setValue(v)}> <ChoiceChip value="train">Train</ChoiceChip> <ChoiceChip value="bus">Bus</ChoiceChip> <ChoiceChip value="boat">Boat</ChoiceChip> </CheckboxGroup> ); };
Chips with icons
<Stack flexDirection="row"> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} > Train </ChoiceChip> <ChoiceChip icon={{ default: <BusOutline24Icon />, checked: <BusFill24Icon /> }} > Bus </ChoiceChip> <ChoiceChip icon={{ default: <FerryOutline24Icon />, checked: <FerryFill24Icon /> }} > Boat </ChoiceChip> </Stack>
Chips in different sizes
<Flex gap={1} flexWrap="wrap" alignItems="center"> <ChoiceChip size="xs">Extra Small aka xs</ChoiceChip> <ChoiceChip size="sm">Small aka sm</ChoiceChip> <ChoiceChip size="md">Medium aka md</ChoiceChip> <ChoiceChip size="lg">Large aka lg</ChoiceChip> </Flex>
Icon chips, choice chips and filter chips
<Stack flexDirection="row"> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} chipType="icon" > Tog </ChoiceChip> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} chipType="choice" > Tog </ChoiceChip> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} chipType="filter" > Tog </ChoiceChip> </Stack>
Different variants
<Stack flexDirection="row"> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} variant="core" > Core </ChoiceChip> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} variant="accent" > Accent </ChoiceChip> <ChoiceChip icon={{ default: <TrainOutline24Icon />, checked: <TrainFill24Icon /> }} variant="floating" > Tog </ChoiceChip> </Stack>