Input

Single-Line Text Field with Label / Hint / Error

01 Preview

02 Usage

Single-line text input, spec-sheet style.

<Input label="Email" placeholder="you@domain.dev" hint="Never shared." />
<Input label="Name" error="Required field" />

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 renders the bare control with no wrapper — which is what makes it compose cleanly inside Field. Standalone and label-less, that means it sizes like a native control rather than stretching to a wrapper.

03 Props

Prop	Type	Default	Notes
label	`string`	—	Uppercase micro-label above the control
hint	`string`	—	—
wrapperClassName	`string`	—	Class for the wrapping label element, which owns the layout box. `className` goes to the `<input>` itself, alongside `ref` and every other rest prop.

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

04 Import

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