Select
Dropdown select fields for form options. Supports labels, placeholders, sizes, and validation states.
When to Use
Use Select when:
The user must pick one option from a predefined list of 4+ items. Good for categories, filters, and settings where the options are known ahead of time.
Don't use when:
There are fewer than 4 options — use radio buttons or Tabs instead. For free-form input with suggestions, use an autocomplete input.
Basic Select
expand_more
<?= ws_select('category', [
'ideation' => 'Ideation',
'strategy' => 'Strategy',
'team' => 'Team Building',
], ['label' => 'Category', 'placeholder' => 'Select...', 'required' => true]) ?>Sizes
expand_more
expand_more
expand_more
With Pre-selected Value
expand_more
<?= ws_select('workshop_type', [
'design_sprint' => 'Design Sprint',
'retrospective' => 'Retrospective',
], ['label' => 'Workshop Type', 'value' => 'retrospective']) ?>Validation States
expand_more
Choose the option that best fits your needs
expand_more
Please select an option
expand_more
<?= ws_select('field', $opts, ['error' => 'Please select an option']) ?>
<?= ws_select('field', $opts, ['helper' => 'Helpful description']) ?>
<?= ws_select('field', $opts, ['disabled' => true]) ?>Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
$name | string | — | Field name attribute (required) |
$selectOptions | array | — | Key-value pairs of value => label |
label | string | null | Field label text |
value | string | '' | Pre-selected value |
placeholder | string | null | Placeholder option text |
required | bool | false | Mark as required |
disabled | bool | false | Disabled state |
error | string | null | Error message (shows error styling) |
helper | string | null | Helper text below the field |
size | string | md | sm | md | lg |
id | string | $name | Element ID |
class | string | '' | Additional CSS classes |
attrs | array | [] | Extra HTML attributes |
Anatomy
.ws-field — Outer field wrapper.ws-field__label — Label text.ws-select-wrap — Select + arrow container.ws-select — Native <select> element.ws-select__arrow — Dropdown chevron icon.ws-field__error / .ws-field__helper — Validation or helper textCSS Classes
| Class | Purpose |
|---|---|
.ws-select | Base select styles |
.ws-select--sm / --md / --lg | Size modifiers |
.ws-select-wrap | Wrapper for select + arrow |
.ws-field | Field wrapper (shared with Input) |
.ws-field--error | Error state on field wrapper |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_select() helper function |
includes/components/select.php | Select template |
includes/components/components.css | Select CSS (.ws-select rules) |