Docs

Select

Select allows users to choose a single value from a list of options presented in an overlay.
const [criteria, setCriteria] = useState<SelectModule.SelectItem[]>();

useEffect(() => setCriteria([
  { 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, setCriteria] = useState<SelectModule.SelectItem[]>();

useEffect(() => setCriteria([
  { 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, setSizes] = useState<SelectModule.SelectItem[]>();

useEffect(() => setSizes([
  { label: 'XS', value: 'xs' },
  { 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, setSizes] = useState<SelectModule.SelectItem[]>();

useEffect(() => setSizes([
  { 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}
  />
);