Option
<cs-option>
Options represent the individual choices inside a select or similar form control. Each option holds a value and the label shown to the user.
This component must be used as a child of <cs-select>. Please see the Select docs to see examples of this component in action.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/option/option.js';
import './cornerstone/components/option/option.js';
import CsOption from '@cruglobal/cornerstone-components/react/option/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The option's label. |
end | An element, such as <cs-icon>, placed after the label. |
start | An element, such as <cs-icon>, placed before the label. |
Attributes & Properties
Learn more about attributes and properties.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
defaultLabel | — | The default label, generated from the element contents. Will be equal to label in most cases. | string | — | — |
defaultSelected | selected | Selects an option initially. | boolean | false | — |
disabled | disabled | Draws the option in a disabled state, preventing selection. | boolean | false | — |
label | label | The option’s plain text label. Usually automatically generated, but can be useful to provide manually for cases involving complex content. | string | — | — |
value | value | The option's value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing multiple values. | string | '' | Yes |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description | Default |
|---|---|---|
--current-text-color | The text color of the current (highlighted) option, paired with --cs-form-control-activated-color. | — |
Custom States
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
current | The user has keyed into the option, but hasn't selected it yet (shows a highlight) | :state(current) |
disabled | Applied when the option is disabled | :state(disabled) |
hover | Like :hover but works while dragging in Safari | :state(hover) |
selected | The option is selected and has aria-selected="true" | :state(selected) |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
checked-icon | The checked icon, a <cs-icon> element. | ::part(checked-icon) |
end | The container that wraps the end slot. | ::part(end) |
label | The option's label. | ::part(label) |
start | The container that wraps the start slot. | ::part(start) |
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.