## Usage ### React ```tsx import React from 'react'; import { KvSelectOption } from '@kelvininc/react-ui-components/client'; export const KvSelectOptionExample: React.FC = () => ( <> {/*-- With all properties (only label and value are mandatory) --*/} ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------- | | `action` | `action` | (optional) Action to display on the right side of the item | `ISelectOptionAction` | `undefined` | | `customAttributes` | `custom-attributes` | (optional) Custom attributes to be applied to the option container element | `{ [x: string]: string; }` | `{}` | | `customClass` | `custom-class` | (optional) Custom class to apply for custom styling. | `CssClassMap \| string \| string[]` | `''` | | `customStyle` | `custom-style` | (optional) Additional style to apply for custom CSS. | `{ [key: string]: string; }` | `undefined` | | `description` | `description` | (optional) Description of the item displayed on the right | `string` | `undefined` | | `disabled` | `disabled` | (optional) If `true` the item is disabled | `boolean` | `false` | | `heading` | `heading` | (optional) If `true` the item is presented as a list heading. Default: `false` | `boolean` | `false` | | `highlighted` | `highlighted` | (optional) If `true` the item is highlighted | `boolean` | `false` | | `icon` | `icon` | (optional) Icon of the item displayed on the left | `EIconName` | `undefined` | | `iconTooltipText` | `icon-tooltip-text` | (optional) Tooltip text to be displayed on icon hover | `string` | `undefined` | | `isDirty` | `is-dirty` | (optional) If true, a dirty dot indicator will be added to left side of the option's text. | `boolean` | `false` | | `label` _(required)_ | `label` | (required) The text to display on the item | `string` | `undefined` | | `level` | `level` | (optional) The level depth at which the option is rendered | `number` | `0` | | `rightIcon` | `right-icon` | (optional) Icon of the item displayed on the right | `EIconName` | `undefined` | | `rightIconTooltipText` | `right-icon-tooltip-text` | (optional) Tooltip text to be displayed on right icon hover | `string` | `undefined` | | `selectable` | `selectable` | (optional) If `false` the item is only for presenting and cannot be selected. | `boolean` | `true` | | `selected` | `selected` | (optional) If `true` the item is selected | `boolean` | `false` | | `state` | `state` | (optional) The toggle button state | `EToggleState.Indeterminate \| EToggleState.None \| EToggleState.Selected` | `undefined` | | `togglable` | `togglable` | (optional) If `true` the item is togglable | `boolean` | `false` | | `value` _(required)_ | `value` | (required) The item value | `string` | `undefined` | ## Events | Event | Description | Type | | -------------- | ---------------------------------------- | --------------------- | | `itemSelected` | Emitted when the user clicks on the item | `CustomEvent` | ## Shadow Parts | Part | Description | | ------------------------- | ------------------------------ | | `"checkbox"` | The option's checkbox | | `"icon"` | The option's icon | | `"label"` | The option's label | | `"option-container"` | The option's container | | `"right-icon"` | The option's right icon | | `"select-option-content"` | The option's content container | ## CSS Custom Properties | Name | Description | | ----------------------------------------------- | ------------------------------------------------- | | `--select-option-background-color` | Select option background color. | | `--select-option-background-color-disabled` | Select option background color when disabled. | | `--select-option-background-color-highlighted` | Select option background color when highlighted. | | `--select-option-background-color-hover` | Select option background color when hovered. | | `--select-option-background-color-selected` | Select option background color when selected. | | `--select-option-description-color` | Select option description color. | | `--select-option-description-color-disabled` | Select option description color when disabled. | | `--select-option-description-color-highlighted` | Select option description color when highlighted. | | `--select-option-description-color-hover` | Select option description color when hovered. | | `--select-option-description-color-selected` | Select option description color when selected. | | `--select-option-height` | Select option height. | | `--select-option-icon-color` | Select option icon color. | | `--select-option-icon-color-disabled` | Select option icon color when disabled. | | `--select-option-icon-color-highlighted` | Select option icon color when highlighted. | | `--select-option-icon-color-hover` | Select option icon color when hovered. | | `--select-option-icon-color-selected` | Select option icon color when selected. | | `--select-option-icon-size` | Select option icon size. | | `--select-option-label-color` | Select option label color. | | `--select-option-label-color-disabled` | Select option label color when disabled. | | `--select-option-label-color-highlighted` | Select option label color when highlighted. | | `--select-option-label-color-hover` | Select option label color when hovered. | | `--select-option-label-color-selected` | Select option label color when selected. | | `--select-option-right-icon-color` | Select option right icon color. | | `--select-option-right-icon-color-disabled` | Select option right icon color when disabled. | | `--select-option-right-icon-color-highlighted` | Select option right icon color when highlighted. | | `--select-option-right-icon-color-hover` | Select option right icon color when hovered. | | `--select-option-right-icon-color-selected` | Select option right icon color when selected. | | `--select-option-right-icon-size` | Select option right icon size. | | `--select-option-transition-duration` | Select option transition time. | ## Dependencies ### Used by - [kv-relative-time-picker](../relative-time-picker) - [kv-select-multi-options](../select-multi-options) ### Depends on - [kv-checkbox](../checkbox) - [kv-tooltip](../tooltip) - [kv-icon](../icon) - [kv-dirty-dot](../dirty-dot) - [kv-action-button-icon](../action-button-icon) ### Graph ```mermaid graph TD; kv-select-option --> kv-checkbox kv-select-option --> kv-tooltip kv-select-option --> kv-icon kv-select-option --> kv-dirty-dot kv-select-option --> kv-action-button-icon kv-checkbox --> kv-radio kv-checkbox --> kv-icon kv-radio --> kv-icon kv-tooltip --> kv-portal kv-tooltip --> kv-tooltip-text kv-dirty-dot --> kv-icon kv-action-button-icon --> kv-action-button kv-action-button-icon --> kv-icon kv-relative-time-picker --> kv-select-option kv-select-multi-options --> kv-select-option style kv-select-option fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------