Inputs

Import: @bnotk/dsx/css/inputs.css

Live Preview

Classes

Class	Description
`.dsx-input`	Text input / number input / textarea
`.dsx-input--error`	Error state
`.dsx-input--sm`	Small variant

Usage

<input class="dsx-input" type="text" placeholder="Enter text...">
<input class="dsx-input" type="number" placeholder="0">
<textarea class="dsx-input" rows="4" placeholder="Multi-line text..."></textarea>

<!-- Error state -->
<input class="dsx-input dsx-input--error" value="Invalid">

<!-- Disabled -->
<input class="dsx-input" disabled value="Read only">

<!-- Small -->
<input class="dsx-input dsx-input--sm" placeholder="Small">

States

Default: 1px grey border (via box-shadow)
:hover — Border darkens
:focus — Cyan focus ring
.dsx-input--error — Red border
:disabled — Grey background, reduced opacity