// Generated by scripts/generate-showcase.mjs. Do not edit directly. page SelectDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "select-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "selectField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Team" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_value = ctx.url.searchParams.get("pg_value") ?? "" state playground_values = ctx.url.searchParams.get("pg_values") ?? "" state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"label\": \"Engineering\",\n \"value\": \"engineering\"\n },\n {\n \"label\": \"Design\",\n \"value\": \"design\"\n },\n {\n \"label\": \"Marketing\",\n \"value\": \"marketing\"\n }\n]" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter select" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field." state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Select" description = "Theme-aware, responsive select component." } view {
Forms component

Select

Theme-aware, responsive select component.

22 props0 slots7 eventsTheme readyResponsive
Interactive playground

Configure Select

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Select
  id="select-1"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  helperText="Helpful context for this field."
/>
Component props22 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default field

Use a labelled field with a value, placeholder, and supporting helper text.

01
Live preview
Component usage.wrn
<Select
  id="select-1"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  helperText="Helpful context for this field."
/>
Appearance

Outlined with start icon

Combine an outlined treatment with a leading icon.

02
Live preview
Component usage.wrn
<Select
  id="select-2"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
/>
Appearance

Floating label

Move the label into the control while preserving an accessible field name.

03
Live preview
Component usage.wrn
<Select
  id="select-3"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
/>
Appearance

Pill and compact size

Use pill styling and compact sizing in dense interfaces.

04
Live preview
Component usage.wrn
<Select
  size="sm"
  id="select-4"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  variant="pill"
/>
States

Read only

Display a submitted value without allowing it to be changed.

05
Live preview
Component usage.wrn
<Select
  id="select-5"
  name="selectField"
  label="Team"
  value="design"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  readonly="true"
/>
States

Disabled

Prevent interaction and communicate that the field is unavailable.

06
Live preview
Component usage.wrn
<Select
  id="select-6"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  disabled="true"
/>
Layout

Inline helper text

Place the label, control, and supporting text on one responsive line.

07
Live preview
Component usage.wrn
<Select
  id="select-7"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  helperText="We'll never share your details."
  inline="true"
/>
Layout

Field with corner hint

Place optional context opposite the label and keep the control on the next line.

08
Live preview
Component usage.wrn
<Select
  id="select-8"
  name="selectField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  cornerHint="Optional"
/>
Validation

Validated field

Surface validation through @wrnexus/validation-compatible error targets and accessible state.

09
Live preview
Component usage.wrn
<Select
  id="select-9"
  name="validatedField"
  label="Team"
  options='[
    {
      "label": "Engineering",
      "value": "engineering"
    },
    {
      "label": "Design",
      "value": "design"
    },
    {
      "label": "Marketing",
      "value": "marketing"
    }
  ]'
  placeholder="Enter select"
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@openFires when the component opens.
@closeFires when the component closes.
@invalidFires when the component emits the invalid event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Select"No
hiddenLabelbooleanfalseNo
valuestring""No
valuesstring[]No
optionsstring[]No
placeholderstring"Select an option"No
variantstring"normal"No
iconstring""No
iconPositionstring"start"No
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
multiplebooleanfalseNo
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }