StellarUI

<stellar-select>

Properties

Preview

Markup

Copy

<stellar-select
  label="View"
  description="Choose the default destination."
  value="browser"
>
  <option value="browser">Browser</option>
  <option value="docs">Docs</option>
  <option value="settings">Settings</option>
</stellar-select>

API

Complete props, events, slots, and implementation notes for the shipped select.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`default \| ghost`	`default`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`state`	`'' \| disabled`	`''`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`value`	`string`	`''`
`start-icon`	`string`	`''`
`end-icon`	`string`	`''`

Events

Event	Source	Notes
`input` / `change`	host	Emitted from the custom element when selection changes so Datastar bindings and DOM listeners stay on the host.
`focus` / `blur`	host	Emitted from the custom element as the popup control gains and loses focus.
custom events	none	`stellar-select` does not emit custom events.

Slots

Slot	Notes
`label`	Optional content above the field. Overrides the `label` prop when present.
`description`	Optional helper content below the field. Overrides the `description` prop when present.
`error`	Optional validation message below the field. It replaces `description` while the inner control is invalid.
default	Author-supplied `<option>` and `<optgroup>` children. They drive the custom popup rows and are mirrored into the hidden native select for forms.
`start`	Optional leading content inside the field when `start-icon` is not used.
`end`	Optional trailing content inside the field before the chevron when `end-icon` is not used.

Notes

The public tag is `stellar-select`, with a custom popup surface backed by a hidden native `<select>` for forms and validity.
The shipped API is `tone`, `appearance`, `size`, `state`, `label`, `description`, `value`, `start-icon`, and `end-icon`, plus `label`, `description`, `start`, and `end` slots.
Author-supplied `<option>` and `<optgroup>` children stay simple on the host, render the custom popup rows, and are mirrored into the hidden native select.
`stellar-select` uses `mode: 'open'`, so it can read exported `stellar.css` tokens directly while keeping field styling local.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native select for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
The visual baseline follows the shipped select height, ghost treatment, chevron, and colored border/focus behavior with direct Stellar token mapping.