Components

DhSelectInput

Native <select> with options array or custom optgroup children. Shares the Material 3 outlined field with DhTextInput: floating label, isError / isSuccess states, trailing status icon. Platform owns the option list — keyboard, touch, and AT all work.

Open in Figma

Floating label 

<DhSelectInput bind:value={country} label="Country" placeholder="Choose one" options={countries} />

Validation states

Higher priorities notify the team.

Pick a country

<DhSelectInput
  bind:value={priority}
  label="Priority"
  options={priorities}
  isError={priority === 'urgent'}
  supportingText={priority === 'urgent' ? 'Urgent is disabled for self-service.' : 'Higher priorities notify the team.'}
/>
<DhSelectInput
  bind:value={country}
  label="Country"
  options={countries}
  isSuccess={Boolean(country)}
  supportingText={country ? 'Saved' : 'Pick a country'}
/>

With start icon 

<DhSelectInput
  bind:value={language}
  label="Language"
  startIcon="languages"
  placeholder="Select a language"
  options={[
    { value: 'en', label: 'English' },
    { value: 'no', label: 'Norsk' }
  ]}
/>

Custom option children

Use children when you need optgroups, custom formatting, or data-attributes.

<DhSelectInput bind:value={region} label="Region" placeholder="Choose a region">
  <optgroup label="Nordics">
    <option value="no">Norway</option>
    <option value="se">Sweden</option>
  </optgroup>
  <optgroup label="Baltics">
    <option value="ee">Estonia</option>
  </optgroup>
</DhSelectInput>

States 

<DhSelectInput label="Empty" placeholder="Pick one" options={countries} />
<DhSelectInput label="Filled" value="no" options={countries} />
<DhSelectInput label="Disabled" value="no" options={countries} disabled />
<DhSelectInput label="Required" options={countries} placeholder="Pick one" required />