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

name string

required string | default: false

options string | default: array

placeholder string

value string

Slots

default

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

Child Component:
<SelectOption>
Properties (documented under the options property above):
  • label
  • 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
---