Kaiko UI Kaiko UI

Select

Stable

Essential dropdown selection component with labels, validation states, and multiple styling options.

API Reference

Attribute Description Type Default
id HTML id for the select element; auto-generated if omitted string ""
label Field label text string ""
color Select color theme string ""
size Select size variant string "md"
bordered Adds select border styling boolean False
ghost Ghost variant with minimal styling boolean False
disabled Disables the select boolean False
hint Helper text shown below the select string ""
error Single error message text string ""
errors List of error message strings list []
hx HTMX event integration for server-side reactivity string ""

color

primary secondary accent info success warning error

size

xs sm md lg

Accessibility

Labels: always provide a label so the select has an accessible name. The component auto-generates a matching id / for relationship between the label and the select element.

Required: mark required fields with required and pair with a visible indicator so users know which fields must be filled.

Errors: error messages are associated with the select via aria-describedby so screen readers announce the error on focus.

Examples

Usage 


<c-select label="Country">
  <option value="" disabled selected>Choose a country</option>
  <option value="us">United States</option>
</c-select>

Basic Select 

<c-select label="Country">
  <option value="" disabled selected>Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
  <option value="fr">France</option>
</c-select>

Colors 

<c-select label="Primary" color="primary">
  <option value="primary">Primary select</option>
</c-select>

Sizes 

<c-select label="Large" size="lg">
  <option value="lg">Large select</option>
</c-select>

Variants 

<c-select label="Ghost" ghost>
  <option value="ghost">Ghost select</option>
</c-select>

States

Please select a valid option
Please select a valid option
Select a valid option
Selection is required 
<c-select label="Required Field" required>
  <option value="" disabled selected>Choose an option</option>
  <option value="1">Option 1</option>
</c-select>

<c-select label="With hint" hint="Please select a valid option">
  <option value="" disabled selected>Select an option</option>
  <option value="1">Option 1</option>
</c-select>

<c-select label="With error" error="Please select a valid option">
  <option value="" disabled selected>Select an option</option>
  <option value="1">Option 1</option>
</c-select>