Base

Class	Description
.ui-select	Base class

Size

Class	Value
.ui-select--sm	sm
.ui-select--lg	lg

Variant

Class	Value
.ui-select--filled	filled
.ui-select--ghost	ghost

State

Class	Value
.ui-select--error	error
.ui-select--success	success

Block

Class	Description
.ui-select--block	block

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-select-height	var(--ui-row-2)	Overall height
--ui-select-padding-x	var(--ui-space-1)	Horizontal padding
--ui-select-font-size	var(--ui-font-size-sm)	Font size
--ui-select-radius	var(--ui-radius-md)	Corner radius
--ui-select-bg	var(--ui-color-bg)	Background color
--ui-select-border-color	var(--ui-color-border-strong)	Border color
--ui-select-border-color-focus	var(--ui-color-primary)	Border color focus
--ui-select-color	var(--ui-color-text)	Text color
--ui-select-icon-color	var(--ui-color-text-muted)	Icon color
--ui-select-height-sm	calc(var(--ui-row) * 1.5)	Overall height at small size
--ui-select-font-size-sm	var(--ui-font-size-xs)	Font size at small size
--ui-select-height-lg	calc(var(--ui-row) * 2.5)	Overall height at large size
--ui-select-padding-x-lg	var(--ui-space-2)	Horizontal padding at large size
--ui-select-font-size-lg	var(--ui-font-size-md)	Font size at large size
--ui-select-filled-bg	var(--ui-color-bg-muted)	Filled bg
--ui-select-error-border	var(--ui-color-danger)	Error border
--ui-select-success-border	var(--ui-color-success)	Success border

<select class="ui-select ui-select--sm">
  <option>Small</option>
  <option>Option 2</option>
</select>
<select class="ui-select">
  <option>Default</option>
  <option>Option 2</option>
</select>
<select class="ui-select ui-select--lg">
  <option>Large</option>
  <option>Option 2</option>
</select>

<select class="ui-select">
  <option>Outline (default)</option>
</select>
<select class="ui-select ui-select--filled">
  <option>Filled</option>
</select>
<select class="ui-select ui-select--ghost">
  <option>Ghost</option>
</select>

<select class="ui-select ui-select--error">
  <option>Error state</option>
</select>
<select class="ui-select ui-select--success">
  <option>Success state</option>
</select>
<select class="ui-select" disabled>
  <option>Disabled</option>
</select>

<select class="ui-select ui-select--block">
  <option value>Full width select...</option>
  <option value="1">Option 1</option>
</select>

<select class="ui-select ui-select--block">
  <option value disabled selected>Choose a fruit...</option>
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
    <option value="blueberry">Blueberry</option>
  </optgroup>
</select>