Option

Option defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within Select, AutoComplete, and other selection components.

Key features:

Value and label separation: Define what gets stored (value) separately from what users see (label)
Automatic fallbacks: Uses label as value or value as label when only one is provided
Custom templates: Support for rich content via optionTemplate property or child components
State management: Built-in enabled/disabled states for individual options
Data integration: Works seamlessly with Items components for dynamic option lists

Using `Option`

With `AutoComplete`

<App>
  <Text value="Selected ID: {myComp.value}"/>
  <AutoComplete id="myComp">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" disabled="true" />
    <Option label="Herbert, Frank" value="herbert" />
  </AutoComplete>
</App>

Example: Option in a AutoComplete

<App>
  <Text value="Selected ID: {myComp.value}"/>
  <AutoComplete id="myComp">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" disabled="true" />
    <Option label="Herbert, Frank" value="herbert" />
  </AutoComplete>
</App>

With `Select`

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" />
    <Option label="Herbert, Frank" value="herbert" />
  </Select>
</App>

Example: Option in a Select

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option label="John, Smith" value="john" />
    <Option label="Jane, Clint" value="jane" />
    <Option label="Herbert, Frank" value="herbert" />
  </Select>
</App>

Use children as Content Template

The optionTemplate property can be replaced by setting the item template component directly as the Option's child. In the following example, the two Option are functionally the same:

<App>
  <!-- This is the same -->
  <Option>
    <property name="optionTemplate">
      <Text>Template</Text>
    </property>
  </Option>
  <!-- As this -->
  <Option>
    <Text>Template</Text>
  </Option>
</App>

Properties

`enabled` (default: true)

This boolean property indicates whether the option is enabled or disabled.

`label`

This property defines the text to display for the option. If label is not defined, Option will use the value as the label.

If Option does not define any of the label or value properties, the option will not be rendered.

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" value="van"/>
    <Option label="Chocolate" value="choc" />
    <Option value="pist" />
  </Select>
</App>

Example: Using label

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" value="van"/>
    <Option label="Chocolate" value="choc" />
    <Option value="pist" />
  </Select>
</App>

`optionTemplate`

This property is used to define a custom option template

`value`

This property defines the value of the option. If value is not defined, Option will use the label as the value. If neither is defined, the option is not displayed.

If Option does not define any of the label or value properties, the option will not be rendered.

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" />
    <Option label="Chocolate" value="chocolate" />
    <Option label="Pistachio" value="pistachio" />
  </Select>
</App>

Example: Using value

<App>
  <Text value="Selected ID: {mySelect.value}"/>
  <Select id="mySelect">
    <Option />
    <Option label="Vanilla" />
    <Option label="Chocolate" value="chocolate" />
    <Option label="Pistachio" value="pistachio" />
  </Select>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.

Option

Using Option

With AutoComplete

With Select