Select

Let visitors choose an option from a drop-down list

Select creates a native drop-down field populated from an Options collection. It is useful when visitors must choose one value from a defined list.

How to Use Select

You’ll find Select under Forms in the Components list.

1. Place Select inside a Form.
2. Enter a unique Name.
3. Set the Placeholder.
4. Add Label and Value pairs to the Options collection.
5. Optionally mark one item as Default.
6. Add a Label whose For value matches the Name.

Component Settings

Settings

Required is off by default.

Name is blank by default. If left blank, Elements generates a name.

Placeholder defaults to “Select an option…”. It has an empty value and remains selected until a visitor chooses an option, unless a Default item is configured.

Select

Text Color defaults to Text 50.

Font defaults to Body and Size to Base. These settings also style the drop-down arrow.

Options

Each item in the Options collection contains:

• Label — Text shown to the visitor. Blank by default.
• Value — Value included in the submission. Blank by default.
• Default — Selects that option initially. Off by default.

Only the first item marked Default is selected.

Outline

Type defaults to None and can be Static or Focus. Focus provides Unfocused and Focused states.

Outline defaults are Solid style, Surface 500 colour, 100% opacity, width 1, and offset 0.

Shared Input Defaults

Select uses 100% Width and Auto Height.

Spacing is enabled with zero Margin and Padding 2 vertically and 3.5 horizontally.

Background supports a colour. The shared Border defaults to None.

Accessibility

Add a visible Label and make every option understandable without surrounding context. When Select is Required, keep the empty Placeholder so the visitor must make an intentional choice.

Related Components

• Radio — Shows all choices at once.
• Input — Collects a free-form value.
• Label — Associates visible text with Select.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.