Site settings
Change the appearance of the site to suit your preferences
Select
Selects are dropdown lists with custom-designed options.
A basic Select
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", }, { label: "Bus", value: "bus", }, { label: "Boat", value: "boat", } ] }) return ( <Select collection={transportationTypes} label="Choose transportation"> {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> ) }
Items with label and description
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", description: "Tougher than trains", }, { label: "Bus", value: "bus", description: "Broom brooooom brooom", }, { label: "Boat", value: "boat", description: "Captain of the sea", } ] }) return ( <Select collection={transportationTypes} label="Choose transportation"> {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item} description={item.description} > {item.label} </SelectItem> ))} </Select> ) }
InfoSelect med ikoner og tekst
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", icon: TrainOutline24Icon, }, { label: "Plane", value: "plane", icon: AirplaneOutline24Icon, }, { label: "Scooter", value: "scooter", icon: ScooterOutline24Icon } ] }) return ( <Select collection={transportationTypes} label="Choose transportation"> {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> <item.icon aria-hidden="true" marginRight={1} /> {item.label} </SelectItem> ))} </Select> ) }
With error text and invalid, for form validation
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", }, { label: "Bus", value: "bus", }, { label: "Boat", value: "boat", } ] }) return ( <Select collection={transportationTypes} label="Choose transportation" invalid={true} errorText="You must choose"> {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> ) }
Controlled
() => { const [color, setColor] = React.useState(["greenHaze"]); const colors = createListCollection({ items: [ { label: "Green haze", value: "greenHaze", }, { label: "Saffron", value: "saffron", }, { label: "Ocean", value: "ocean", } ] }); return ( <Box> <SmileOutline30Icon color={color} marginBottom="1"/> <Select collection={colors} label="Choose color" defaultValue={["greenHaze"]} onValueChange={(newColor) => setColor(newColor.value)} > {colors.items.map((item, index) => ( <SelectItem key={index} item={item} > {item.label} </SelectItem> ))} </Select> </Box> ) }
Different variants
() => { const transportationTypes = createListCollection({ items: [ { label: "Train", value: "train", }, { label: "Plane", value: "plane", }, { label: "Scooter", value: "scooter", } ] }) return ( <Stack gap={2}> <Select collection={transportationTypes} label="Core" > {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> <Select collection={transportationTypes} label="Floating" variant="floating" > {transportationTypes.items.map((item, index) => ( <SelectItem key={index} item={item}> {item.label} </SelectItem> ))} </Select> </Stack> ) }
Info label only for screen reader:
<Select isLabelSrOnly={true} label="Velg en farge"> <SelectItem>Grønn</SelectItem> <SelectItem>Gul</SelectItem> <SelectItem>Oransje</SelectItem> </Select>