Select Field Components

Filled Select Fields

Filled select fields use a solid background (surface-container-low) and are the default variant for form selects. They provide clear visual prominence for user input areas with a bottom border that animates on focus.

Default

expand_more Country

With Help Text

expand_more Country

Select your country of residence

Required

expand_more Preferred Language

Disabled

expand_more Status

With Error

expand_more Priority

Please select a priority level

With Pre-selected Value

expand_more Timezone

Secondary Color

expand_more Theme

Tertiary Color

expand_more Notifications

Outlined Select Fields

Select fields allow users to choose from a list of options. They use a readonly input field that triggers a menu dropdown with selectable options. The outlined variant uses a border to define boundaries and works well in dense UIs.

Default

expand_more Country

With Help Text

expand_more Country

Select your country of residence

Required

expand_more Preferred Language

Disabled

expand_more Status

With Error

expand_more Priority

Please select a priority level

With Pre-selected Value

expand_more Timezone

With Leading Icons

expand_more Department

Long Options List

expand_more City

Secondary Color

expand_more Theme

Tertiary Color

expand_more Notifications

Keyboard Typing & Typeahead

Select components support native-like keyboard typing to quickly find options. Start typing when the menu is open to jump to options that start with those letters. The typeahead search resets after 1 second of inactivity.

Countries (Filled) - Type to Search

Open the menu and try typing: "u" for United States, "c" for Canada, "g" for Germany, etc.

expand_more Country

Programming Languages (Outlined)

Try typing multiple letters like "py" for Python, "ja" for Java, "ty" for TypeScript.

expand_more Programming Language

How to Use Typeahead:

• Open a select menu by clicking or using keyboard (Enter, Space, Arrow keys)
• Start typing letters to search for options that start with those letters
• The search is case-insensitive and matches from the beginning of option text
• Continue typing to narrow down the search (e.g., "py" will find "Python")
• The search string resets after 1 second of inactivity
• Use Arrow keys for manual navigation, Enter/Space to select

Usage

<!-- Filled select field (default variant) -->
<c-forms.select.filled id="country">
  Country
  <c-slot name="options">
    <c-forms.select.option value="us">United States</c-forms.select.option>
    <c-forms.select.option value="ca">Canada</c-forms.select.option>
    <c-forms.select.option value="uk">United Kingdom</c-forms.select.option>
  </c-slot>
</c-forms.select.filled>

<!-- Outlined select field -->
<c-forms.select.outlined id="country_outlined">
  Country
  <c-slot name="options">
    <c-forms.select.option value="us">United States</c-forms.select.option>
    <c-forms.select.option value="ca">Canada</c-forms.select.option>
    <c-forms.select.option value="uk">United Kingdom</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- With help text -->
<c-forms.select.filled id="language" help_text="Select your preferred language">
  Language
  <c-slot name="options">
    <c-forms.select.option value="en">English</c-forms.select.option>
    <c-forms.select.option value="es">Spanish</c-forms.select.option>
  </c-slot>
</c-forms.select.filled>
<c-forms.select.outlined id="outlined_language" help_text="Select your preferred language">
  Language
  <c-slot name="options">
    <c-forms.select.option value="en">English</c-forms.select.option>
    <c-forms.select.option value="es">Spanish</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- Required field -->
<c-forms.select.filled id="priority" required>
  Priority
  <c-slot name="options">
    <c-forms.select.option value="low">Low</c-forms.select.option>
    <c-forms.select.option value="high">High</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- With error message -->
<c-forms.select.filled id="status" error="Please select a status">
  Status
  <c-slot name="options">
    <c-forms.select.option value="active">Active</c-forms.select.option>
    <c-forms.select.option value="inactive">Inactive</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- With pre-selected value -->
<c-forms.select.filled id="theme" value="dark">
  Theme
  <c-slot name="options">
    <c-forms.select.option value="light">Light</c-forms.select.option>
    <c-forms.select.option value="dark">Dark</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- With icons in options -->
<c-forms.select.outlined id="department">
  Department
  <c-slot name="options">
    <c-forms.select.option value="eng">
      <c-slot name="leading">
        <span class="material-symbols text-on-surface-variant">code</span>
      </c-slot>
      Engineering
    </c-forms.select.option>
    <c-forms.select.option value="design">
      <c-slot name="leading">
        <span class="material-symbols text-on-surface-variant">palette</span>
      </c-slot>
      Design
    </c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- Disabled field -->
<c-forms.select.filled id="locked" disabled>
  Locked Field
  <c-slot name="options">
    <c-forms.select.option value="option1">Option 1</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- With color variants -->
<c-forms.select.filled id="secondary" color="secondary">
  Secondary Field
  <c-slot name="options">
    <c-forms.select.option value="opt1">Option 1</c-forms.select.option>
  </c-slot>
</c-forms.select.outlined>

<!-- Custom menu height for long lists -->
<c-forms.select.outlined id="cities" menu_max_height="200px">
  City
  <c-slot name="options">
    <!-- Many options... -->
  </c-slot>
</c-forms.select.outlined>

Attributes

Attribute	Type	Default	Description
`id`	string	none	Unique identifier for the select field (required)
`color`	string	"primary"	Select color theme. Options: "primary", "secondary", "tertiary"
`menu_max_height`	string	"300px"	Maximum height of the dropdown menu
`help_text`	string	none	Helper text displayed below the select
`error`	string	none	Error message to display
`value`	string	none	Pre-selected value (matches option value)
`required`	boolean	false	When true, the field is required
`disabled`	boolean	false	When true, the select is disabled and non-interactive

Option Attributes

Attribute	Type	Default	Description
`value`	string	text content	Value submitted with the form (defaults to text content)
`leading`	slot	none	Content displayed before the option text (usually icons)
`trailing`	slot	none	Content displayed after the option text

Keyboard Navigation

Key	Action
`Enter`	Open menu when focused on trigger, select option when focused on option
`Space`	Open menu when focused on trigger, select option when focused on option
`↓ Arrow Down`	Open menu or move to next option
`↑ Arrow Up`	Open menu or move to previous option
`Escape`	Close menu and return focus to trigger
`Tab`	Close menu and move to next focusable element