Components

DhSelectInput

Native <select> with options array or custom optgroup children. Platform owns the option list — keyboard, touch, and AT all work.

Open in Figma

Sizes

<DhSelectInput bind:value={country} size="sm" label="Small" options={countries} />
<DhSelectInput bind:value={country} size="md" label="Medium" options={countries} />
<DhSelectInput bind:value={country} size="lg" label="Large" options={countries} />

Helper vs error

Higher priorities notify the team.

<DhSelectInput
  bind:value={priority}
  label="Priority"
  options={priorities}
  helperText="Higher priorities notify the team."
  errorText={priorityError}
/>

With start icon

<DhSelectInput
  bind:value={language}
  label="Language"
  startIcon="workflow"
  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 />
<DhSelectInput label="Error" value="no" options={countries} errorText="Invalid selection." />