HySelect

A customizable select dropdown component that wraps the native HTML select element.

This component accepts slotted native <option> elements which are rendered within a standard <select>. This approach provides enhanced styling, validation states, and accessibility features while maintaining native select behavior.

Examples

<hy-select label="Choose a color" placeholder="Select a color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</hy-select>

<hy-select label="Country" helper-text="Select your country of residence" required size="large">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</hy-select>

<hy-select label="Priority Level" value="medium" name="priority" size="small">
  <option value="low">Low Priority</option>
  <option value="medium">Medium Priority</option>
  <option value="high">High Priority</option>
  <option value="urgent" disabled>Urgent</option>
</hy-select>

<hy-select label="Account Type" invalid error-message="Please select an account type" required>
  <option value="personal">Personal Account</option>
  <option value="business">Business Account</option>
  <option value="enterprise">Enterprise Account</option>
</hy-select>

<hy-select
  label="Subscription Plan"
  disabled
  value="free"
  helper-text="Upgrade options are temporarily unavailable"
>
  <option value="free">Free Plan</option>
  <option value="pro">Pro Plan</option>
  <option value="enterprise">Enterprise Plan</option>
</hy-select>

<form>
  <hy-select name="department" label="Department" required>
    <option value="sales">Sales</option>
    <option value="marketing">Marketing</option>
    <option value="engineering">Engineering</option>
    <option value="support">Customer Support</option>
  </hy-select>

  <hy-select name="experience" label="Years of Experience" placeholder="Select experience level">
    <option value="0-2">0-2 years</option>
    <option value="3-5">3-5 years</option>
    <option value="6-10">6-10 years</option>
    <option value="10+">10+ years</option>
  </hy-select>
</form>

Events

• change - Fired when the selected value changes. Detail:
• input - Fired during value input. Detail:

Slots

• default - Slot for native option elements that define the available choices

Methods

willUpdate()

Generates IDs before first render to prevent SSR hydration mismatches.

updated()

Updates the native select element's value when the component's value property changes. This ensures consistency between the custom element's state and the underlying native element.

focus()

Sets focus on the select.

Parameters:

• options - Optional focus options

const select = document.querySelector('hy-select');
select.focus();

blur()

Removes focus from the select.

const select = document.querySelector('hy-select');
select.blur();