StellarUI

<stellar-combobox>

Properties

Preview

Luna

Whiskers

Mittens

Shadow

Markup

Copy

<stellar-combobox
  label="Favorite kitten"
  description="Pick one kitten."
  name="kitten"
  value="luna"
  placeholder="Search kittens"
>
  <stellar-combobox-item value="luna">Luna</stellar-combobox-item>
  <stellar-combobox-item value="whiskers">Whiskers</stellar-combobox-item>
  <stellar-combobox-item value="mittens">Mittens</stellar-combobox-item>
</stellar-combobox>

API

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

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`name`	`string`	`''`
`value`	`string`	`''`
`placeholder`	`string`	`''`
`open`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readonly`	`boolean`	`false`
`required`	`boolean`	`false`

Events

Event	Source	Notes
`input`	host	Fires when typing changes the filter query or when a user selection updates `value`.
`change`	host	Fires when a user commits an option selection.
`focus`	host	Redispatched when focus enters the combobox.
`blur`	host	Redispatched when focus leaves the combobox.

Slots

Slot	Notes
default	Author one or more direct `stellar-combobox-item` children.
`label`	Optional label content. Overrides `label` when present.
`description`	Optional helper copy. Overrides `description` when present.
`error`	Optional error copy. Overrides `error` when present.

Notes

The public tag is `stellar-combobox`, with direct `stellar-combobox-item` children as options.
Typing filters visible options, but `value` only changes when the user commits a selection.
`open` can be driven from the host, but the component also opens on focus and closes after selection or blur.
`disabled` blocks both input and item interaction, while item-level `disabled` blocks individual options.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native text input 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.