Option

The Option component represents a selectable item within components like Select, Combobox, or Listbox.

Import

<script>
  import { Option } from 'svelte-fluentui';
</script>
svelte

Basic Usage

Used within other components:

<Select>
  <Option value="1">First Option</Option>
  <Option value="2">Second Option</Option>
</Select>
svelte

With Custom Content

<Listbox>
  <Option value="user1">
    <div class="user-option">
      <img src="avatar1.jpg" alt="User" />
      <span>John Doe</span>
    </div>
  </Option>
  <Option value="user2">
    <div class="user-option">
      <img src="avatar2.jpg" alt="User" />
      <span>Jane Smith</span>
    </div>
  </Option>
</Listbox>
svelte

Disabled Option

<Select>
  <Option value="enabled">Enabled Option</Option>
  <Option value="disabled" disabled>Disabled Option</Option>
</Select>
svelte

Properties

PropertyTypeDefaultDescription
valuestringundefinedOption value
disabledbooleanfalseWhether the option is disabled
selectedbooleanfalseWhether the option is selected

Events

EventDescription
on:clickFired when the option is clicked
Last update at: Invalid Date