Back to site

Select

Form field for selecting one option from a list.

---
import Select from "@forms/select/Select.astro";
import SelectOption from "@forms/select/SelectOption.astro";
---

<Select label="City" name="city">
  <SelectOption label="Auckland" value="auckland" />
  <SelectOption label="Wellington" value="wellington" />
  <SelectOption label="Christchurch" value="christchurch" />
  <SelectOption label="Hamilton" value="hamilton" />
  <SelectOption label="Dunedin" value="dunedin" />
  <SelectOption label="Tauranga" value="tauranga" />
</Select>
---
blocks:
  _component: building-blocks/forms/select
  label: City
  name: city
  options:
    - value: auckland
      label: Auckland
    - value: wellington
      label: Wellington
    - value: christchurch
      label: Christchurch
    - value: hamilton
      label: Hamilton
    - value: dunedin
      label: Dunedin
    - value: tauranga
      label: Tauranga
---

Overview

A form field that lets users select one option from a dropdown list. Supports custom labels, placeholders, default selections, and required validation. Each option includes a label and a value used in the form submission.

Properties

label string

The label text for the select field.

name string

A unique name attribute for the select field.

required boolean | default: false

Whether the field is required.

options array | default: array

Array of select options with value and label.

Item Properties:

value string

The value to add to the form when the option is selected.

label string

The label text for the select option.

placeholder string

Placeholder text for the select field.

value string

The default selected value.

Slots

default

Select options. Used only when the options property is not set.

Child Component:
<SelectOption>
Properties (documented under the options property above):
  • label/slot
  • value
  • selected
  • disabled

Examples

Placeholder

---
import Select from "@forms/select/Select.astro";
import SelectOption from "@forms/select/SelectOption.astro";
---

<Select label="Department" name="department" placeholder="Choose a department...">
  <SelectOption label="Engineering" value="engineering" />
  <SelectOption label="Design" value="design" />
  <SelectOption label="Marketing" value="marketing" />
  <SelectOption label="Sales" value="sales" />
  <SelectOption label="Customer Support" value="support" />
</Select>
---
blocks:
  _component: building-blocks/forms/select
  label: Department
  name: department
  placeholder: Choose a department...
  options:
    - value: engineering
      label: Engineering
    - value: design
      label: Design
    - value: marketing
      label: Marketing
    - value: sales
      label: Sales
    - value: support
      label: Customer Support
---

Required

---
import Select from "@forms/select/Select.astro";
import SelectOption from "@forms/select/SelectOption.astro";
---

<Select label="Priority Level" name="priority" placeholder="Select priority..." required>
  <SelectOption label="Low" value="low" />
  <SelectOption label="Medium" value="medium" />
  <SelectOption label="High" value="high" />
  <SelectOption label="Urgent" value="urgent" />
</Select>
---
blocks:
  _component: building-blocks/forms/select
  label: Priority Level
  name: priority
  placeholder: Select priority...
  required: true
  options:
    - value: low
      label: Low
    - value: medium
      label: Medium
    - value: high
      label: High
    - value: urgent
      label: Urgent
---