Struct Option_ 

pub struct Option_;

The <option> element - defines an option in a <select>, <optgroup>, or <datalist>.

Purpose

The <option> element defines an individual option within a <select> element or suggestions within a <datalist> element. Each option represents a value that users can choose. The text content of the element is what users see, while the value attribute is what gets submitted with the form.

Content Categories

• None (only valid within <select>, <optgroup>, or <datalist>)

Permitted Content Model

• Text content (if label attribute is present, text is ignored)

Common Use Cases

• Dropdown menu choices
• Multi-select list items
• Autocomplete suggestions
• Combobox options
• Form selection values

Key Attributes

• value: Value submitted with the form (defaults to text content if not specified)
• selected: Pre-selects this option
• disabled: Disables this option
• label: Alternative text for the option (overrides text content)

Example

<!-- Basic options -->
<select name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- Option with selected attribute -->
<select name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

<!-- Disabled option -->
<select name="status">
  <option value="">Select status</option>
  <option value="active">Active</option>
  <option value="inactive" disabled>Inactive (unavailable)</option>
</select>

<!-- Options with different display and value -->
<select name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<!-- Option with label attribute -->
<select name="product">
  <option value="prod1" label="Premium Widget">Premium Widget - $99</option>
  <option value="prod2" label="Basic Widget">Basic Widget - $49</option>
</select>

<!-- Options in datalist -->
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">Google Chrome</option>
  <option value="Firefox">Mozilla Firefox</option>
  <option value="Safari">Apple Safari</option>
</datalist>

<!-- Placeholder option -->
<select name="category" required>
  <option value="" disabled selected>-- Select category --</option>
  <option value="tech">Technology</option>
  <option value="health">Health</option>
  <option value="finance">Finance</option>
</select>

Accessibility

• Use clear, concise option text
• Ensure value attributes are meaningful
• Don’t rely solely on color to distinguish options
• Use disabled attribute instead of hiding options when appropriate
• Provide a default/placeholder option for clarity

WHATWG Specification

• 4.10.10 The option element

Trait Implementations

impl HtmlElement for Option_

const TAG: &'static str = "option"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Option_> for Datalist

impl CanContain<Option_> for Optgroup

impl CanContain<Option_> for Select

impl CanContain<Text> for Option_