Select

Overview

Select component is actually a dropdown component with select input behaviour.

It takes almost all select input props. The main difference is that select input design depends on browser / OS, it means that, for instance, Mac OS and Windows don’t display some web elements same way. This rule doesn’t apply to this Select component.

Here below is an example:

Copied !

---
import type { SelectOptionType } from "$components/input/types";
import Select from "$components/select/Select.astro";

const items: SelectOptionType[] = [
  {
    label: "Milk",
    value: "milk",
    disabled: true,
  },
  {
    label: "Eggs",
    value: "eggs",
    disabled: false,
  },
  {
    label: "Cheese",
    value: "cheese",
    disabled: true,
  },
  {
    label: "Bread",
    value: "bread",
    disabled: false,
  },
  {
    label: "Apples",
    value: "apples",
    disabled: false,
  },
  {
    label: "Bananas",
    value: "bananas",
    disabled: false,
  },
  {
    label: "Yogurt",
    value: "yogurt",
    disabled: false,
  },
  {
    label: "Sugar",
    value: "sugar",
    disabled: false,
  },
  {
    label: "Salt",
    value: "salt",
    disabled: false,
  },
  {
    label: "Coffee",
    value: "coffee",
    disabled: false,
  },
  {
    label: "Tea",
    value: "tea",
    disabled: true,
  },
];
---

<Select
  id="dropdown-select"
  name="dropdown-select"
  {items}
  placeholder="Select an item"
  class="w-64 border rounded-md shadow-sm border-neutral-200/70"
  @select="console.log($event.detail)"
/>