Struct Select 

pub struct Select;

The <select> element - represents a control for selecting among a set of options.

Purpose

The <select> element provides a dropdown list of options from which users can choose one or more values. Contains <option> elements that define the available choices, and can be grouped using <optgroup> elements. More compact than radio buttons for multiple choices.

Content Categories

• Flow Content
• Phrasing Content
• Interactive Content
• Palpable Content

Permitted Content Model

• Zero or more <option> or <optgroup> elements

Common Use Cases

• Country or state selection dropdowns
• Category or type selectors
• Quantity or size pickers
• Date component selectors (month, year)
• Multi-select lists for tags or categories

Key Attributes

• name: Name for form submission
• multiple: Allow selecting multiple options
• size: Number of visible options
• required: Make selection mandatory
• disabled: Disable the entire select
• autocomplete: Autocomplete hint
• form: Associates with a form by ID

Example

<!-- Basic dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<!-- Select with pre-selected option -->
<label for="size">Size:</label>
<select id="size" name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

<!-- Multi-select -->
<label for="interests">Interests (select multiple):</label>
<select id="interests" name="interests" multiple size="4">
  <option value="sports">Sports</option>
  <option value="music">Music</option>
  <option value="art">Art</option>
  <option value="tech">Technology</option>
</select>

<!-- Grouped options -->
<label for="car">Choose a car:</label>
<select id="car" name="car">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<!-- Required select with placeholder -->
<label for="department">Department:</label>
<select id="department" name="department" required>
  <option value="" disabled selected>-- Choose department --</option>
  <option value="sales">Sales</option>
  <option value="engineering">Engineering</option>
  <option value="support">Support</option>
</select>

<!-- Disabled select -->
<label for="status">Status:</label>
<select id="status" name="status" disabled>
  <option>Processing</option>
</select>

Accessibility

• Always provide an associated <label>
• Use first option as a prompt/placeholder, not a valid choice
• Provide clear option text
• Group related options with <optgroup>
• For long lists, consider searchable alternatives
• Ensure keyboard navigation works properly
• Use aria-describedby for additional instructions

WHATWG Specification

• 4.10.7 The select element

Trait Implementations

impl HtmlElement for Select

const TAG: &'static str = "select"

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<Optgroup> for Select

impl CanContain<Option_> for Select

impl CanContain<Script> for Select

impl CanContain<Template> for Select

impl FlowContent for Select

impl InteractiveContent for Select

impl PalpableContent for Select

impl PhrasingContent for Select