Library · Forms & CTAs

Select

Styled select with bundled label and validation message — iCreate local addition mirroring the Input API and DOM, so the vendored Form's progressive-enhancement validation works on it unchanged. Token-coloured gradient chevron, no wrapper markup.

Figma: Primitives / Select ↗

Live preview — edit theme bottom-right

---
import Select from "../components/primitives/forms/Select.astro";
---
<Select
  name="enquiryType"
  label="Enquiry type"
  placeholder="Select an option"
  options={[
    { label: "Sales enquiry", value: "sales" },
    { label: "Rental enquiry", value: "rental" },
    { label: "General", value: "general" },
  ]}
  required
/>
<Select
  name="state"
  label="State"
  value="qld"
  options={[
    { label: "QLD", value: "qld" },
    { label: "NSW", value: "nsw" },
    { label: "VIC", value: "vic" },
  ]}
/>
<Select
  name="disabledExample"
  label="Disabled"
  placeholder="Unavailable"
  options={[{ label: "Option", value: "x" }]}
  disabled
/>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the select label
`id`	`string`	—	Unique identifier for the select field
`name`	`string`	Yes	Name attribute (required for form submission)
`label`	`string`	Yes	Label text for the select field
`options`	`SelectOption[]`	—	Options to render. Alternatively slot <option> elements
`placeholder`	`string`	—	Placeholder shown as a disabled empty first option
`value`	`string`	—	Pre-selected option value
`data-validation`	`string`	—	Error message to display when validation fails
`required`	`boolean`	—	Whether the field is required (default: false)
`disabled`	`boolean`	—	Whether the field is disabled (default: false)
`[key: string]`	`any`	—	HTML attributes
`(slot)`	`children`	—	<option> elements — alternative to the options prop.

Example with all props

<Select
  class="enquiry-type"
  id="enquiry-type"
  name="enquiryType"
  label="Enquiry type"
  placeholder="Select an option"
  value="sales"
  options={[
    { label: "Sales enquiry", value: "sales" },
    { label: "Rental enquiry", value: "rental" },
    { label: "General", value: "general" },
  ]}
  required
  disabled={false}
  data-validation="Please choose an enquiry type"
/>

<!-- Or slot options directly instead of the options prop -->
<Select name="state" label="State">
  <option value="qld">QLD</option>
  <option value="nsw">NSW</option>
</Select>