Select
Select allows users to choose a single option from a filterable dropdown list. Supports keyboard navigation, validation states, and dense mode (compact) for space-constrained layouts.
Default
Six options with an empty placeholder option for deselection. Type in the filter input to narrow the list.
<diwa-select label="Favourite fruit" name="fruit">
<diwa-select-option>Please select…</diwa-select-option>
<diwa-select-option value="apple">Apple</diwa-select-option>
<diwa-select-option value="banana">Banana</diwa-select-option>
<diwa-select-option value="cherry">Cherry</diwa-select-option>
<diwa-select-option value="dragonfruit">Dragon Fruit</diwa-select-option>
<diwa-select-option value="elderberry">Elderberry</diwa-select-option>
<diwa-select-option value="fig">Fig</diwa-select-option>
</diwa-select>With description and message
Use description to add a hint beneath the label, and message + state to show validation feedback.
<diwa-select label="Country" name="country" description="Select your country of residence." state="error" message="A country is required.">
<diwa-select-option>Please select…</diwa-select-option>
<diwa-select-option value="nl">Netherlands</diwa-select-option>
<diwa-select-option value="de">Germany</diwa-select-option>
<diwa-select-option value="be">Belgium</diwa-select-option>
</diwa-select>Disabled
Set disabled to prevent interaction.
<diwa-select label="Role" name="role" disabled>
<diwa-select-option value="admin">Admin</diwa-select-option>
<diwa-select-option value="editor">Editor</diwa-select-option>
<diwa-select-option value="viewer">Viewer</diwa-select-option>
</diwa-select>Compact
The compact prop enables dense mode and reduces trigger height for toolbars or dense layouts.
<diwa-select label="Size" name="size" compact>
<diwa-select-option value="sm">Small</diwa-select-option>
<diwa-select-option value="md">Medium</diwa-select-option>
<diwa-select-option value="lg">Large</diwa-select-option>
</diwa-select>