Live demo — this example is server-driven; run the showcase locally for the interactive version.

Form select

Native <select> wrapped in PF's form-control. Use when the option set is small and known upfront — for larger sets or filtered search use the rich Select component.

Examples

Basic

A simple select with title options. Use a leading blank option as placeholder text.

Grouped

<optgroup> tags inside the options slot.

Validated

validated="error" emits pf-m-error + the status icon.

Disabled

Disabled select — no user interaction, muted styling.

Documentation

Form select props

Parameters accepted by {#include components/forms/form-select ... /}. Model mode: pass formSelect=<FormSelect> built in Java instead — the Java tab on each example shows the builder. Options go in the options slot.

* required
Name	Type	Description
* `id`	String	Wrapper id; inner <select> gets `{id}-field`.
`disabled` / `required`	boolean	Standard HTML form attrs.
`validated`	`success \| warning \| error`	Validation state.
slot `options`	Qute block	Native <option> (and optionally <optgroup>) tags.

Usage

Native vs. Select component. Form select renders the browser-native <select> UI — fast, accessible, mobile-friendly. Reach for the rich Select when you need search, multi-select, or custom option rendering.

Placeholder. Add a leading <option value="">Select…</option> — native <select> has no built-in placeholder attribute.

Edit form-select.html on GitHub