Select
Select allows users to choose a single value from a list of options presented in an overlay.
const criteria = [
{ label: "Most recent first", value: "recent" },
{ label: "Rating: high to low", value: "rating-desc" },
{ label: "Rating: low to high", value: "rating-asc" },
{ label: "Price: high to low", value: "price-desc" },
{ label: "Price: low to high", value: "price-asc" },
];
return (
<Select
label="Sort by"
items={criteria}
value={criteria && criteria[0]?.value}
/>
);
Dividers
Dividers can be used to group related options. Use dividers sparingly to avoid creating unnecessary visual clutter.
const criteria = [
{ label: "Most recent first", value: "recent" },
{ component: "hr" },
{ label: "Rating: high to low", value: "rating-desc" },
{ label: "Rating: low to high", value: "rating-asc" },
{ component: "hr" },
{ label: "Price: high to low", value: "price-desc" },
{ label: "Price: low to high", value: "price-asc" },
];
return (
<Select
label="Sort by"
items={criteria}
value={criteria && criteria[0]?.value}
/>
);
Disabled Items
Items can be disabled. This prevents users from selecting them, while still showing that these items would be available for selection under different circumstances.
const sizes = [
{ label: "XS (out of stock)", value: "xs", disabled: true },
{ label: "S", value: "s" },
{ label: "M", value: "m" },
{ label: "L", value: "l" },
{ label: "XL", value: "xl" },
];
return <Select label="Size" items={sizes} value={sizes && sizes[4]?.value} />;
Placeholder
Use the placeholder feature to provide an inline text prompt for the field. Don’t create, or use, a separate item for this purpose.
const sizes = [
{ label: "XS", value: "xs" },
{ label: "S", value: "s" },
{ label: "M", value: "m" },
{ label: "L", value: "l" },
{ label: "XL", value: "xl" },
];
return <Select label="Size" placeholder="Select size" items={sizes} />;
Important
| You can find more information in the corresponding article on vaadin.com. |