Back to site

Select

Form field for selecting one option from a list.

---
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 | default: My Select

The label text for the select field.

name string | default: my_select

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.

iconName enum

The name of an optional leading icon. Sourced from [Heroicons](https://heroicons.com/). See the Icon component documentation for more information.

iconColor enum | default: default

The color of the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

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 # 

---
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 # 

---
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
---

Icon # 

---
blocks:
  _component: building-blocks/forms/select
  label: Sort By
  name: sort
  iconName: arrows-up-down
  options:
    - value: most_recent
      label: Most Recent
    - value: oldest
      label: Oldest
    - value: a_z
      label: A - Z
    - value: z_a
      label: Z - A
---

Icon color # 

---
blocks:
  _component: building-blocks/forms/select
  label: Priority
  name: priority
  iconName: flag
  iconColor: orange
  options:
    - value: low
      label: Low
    - value: medium
      label: Medium
    - value: high
      label: High
---