Components / forms

Select

Single Choice from a Short Static List

01 Preview

02 Usage

Dropdown built on native select.

<Select label="Topic" options={['Work', 'Research', 'Other']} />

className and every other rest prop go to the control itself; wrapperClassName styles the label wrapper that owns the layout box.

With no label, hint, error or wrapperClassName it drops the .ddk-field wrapper — which is what makes it compose cleanly inside Field. Unlike Input and Textarea, the root is still a <span class="ddk-select"> rather than the bare <select>: that span carries the ▾ affordance, so it stays even in this form. Style the control with a select descendant selector rather than assuming it is the root.

03 Props

PropTypeDefaultNotes
label string
hint string
error string
options Array<string | { value: string; label: string }> Strings or {value,label} pairs
wrapperClassName string Class for the wrapping label element, which owns the layout box. `className` goes to the `<select>` itself, alongside `ref` and every other rest prop.

Also accepts every attribute of React.SelectHTMLAttributes<HTMLSelectElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Select } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';