Site settings
Change the appearance of the site to suit your preferences
Checkbox
Use Checkbox when the user needs multiple checked options or accepting terms.
A simple checkbox
<Checkbox> Jeg liker tog </Checkbox>
A group of checkboxes, with default checked
<CheckboxGroup defaultValue={["train", "ship"]} gap={3}> <Checkbox value="train">Train</Checkbox> <Checkbox value="bus">Bus</Checkbox> <Checkbox value="ship">Ship</Checkbox> </CheckboxGroup>
Different states and vertical layout
<CheckboxGroup direction="column"> <Checkbox disabled>Disabled</Checkbox> <Checkbox checked disabled> Disabled </Checkbox> <Checkbox readOnly>Readonly</Checkbox> <Checkbox invalid>Invalid</Checkbox> </CheckboxGroup>
A controlled checkbox
() => { const [checked, setChecked] = React.useState(false) return ( <Checkbox checked={checked} onCheckedChange={(e) => setChecked(!!e.checked)} > Check me </Checkbox> ) }
With the CheckboxGroup and Fieldset components
<Fieldset> <CheckboxGroup defaultValue={['train', 'bus']} direction="column"> <FieldsetLegend> Choose transportation </FieldsetLegend> <FieldsetContent display="flex" flexDirection="column" gap={1}> <Checkbox value="train">Train</Checkbox> <Checkbox value="boat">Boat</Checkbox> <Checkbox value="walking">Walking</Checkbox> <Checkbox value="bus">Bus</Checkbox> <Checkbox value="flying">Flying</Checkbox> </FieldsetContent> </CheckboxGroup> </Fieldset>