ki-option

A declarative data option rendered by its owning ki-select: its text is the human-facing label and its value is the submitted value. ki-option never renders standalone — the select owns painting, selection and keyboard behavior.

Spain France Portugal

<ki-select label="Country" name="country" placeholder="Choose a country">
<ki-option value="es">Spain</ki-option>
<ki-option value="fr">France</ki-option>
<ki-option value="pt">Portugal</ki-option>
</ki-select>

Examples

Value fallback and disabled options

An option without value submits its trimmed label text; disabled removes the option from selection while keeping it visible:

1-10 11-50 51+

<ki-select label="Team size" name="size">
<ki-option>1-10</ki-option>
<ki-option>11-50</ki-option>
<ki-option disabled>51+</ki-option>
</ki-select>

API reference

When to use: declare one choice inside a ki-select; its text is the human-facing label and its value is the submitted value.

When not to use: ki-option standalone, authoring selection on an option, or expecting it to paint its own row.

Properties & attributes

Attribute	Property	Type	Default	Description
disabled	disabled	boolean	false	Makes this option unavailable. Disabled options cannot be selected, are skipped by keyboard highlight, and are exposed unavailable by the select.
value	value	string | undefined	–	Submission and selection value for this option. When omitted, the value falls back to the trimmed option text, matching native <option> parity. When NOT to use: do not use this as selection state; set ki-select.value.

Slots

Slot	Description
(default)	Text label mirrored by the owning select.

Accessibility

Selection state lives on the owning select’s value, never authored on the option. The option text is the label assistive technology reads.

Workshop

Documented with its parent: open ki-select in Storybook