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}
  />
);

Common Input Field Features

Select includes all Text Field and shared input field features.

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.

Docs