Skip to content
WovenUI

Text input

wu-input styles a text-like <input>. Core’s base styles already set the border, background, hover, focus ring, invalid border, disabled look, placeholder color, padding and the medium height; the kit adds the radius, the type size and the sizes.

Class or attribute Effect
wu-input Root. Medium radius and type size
sm, lg Small and large control height
disabled Not-allowed cursor, plus the core disabled look
readonly Alternate background
aria-invalid="true" or :user-invalid Core’s danger border, doubled to 2px by the kit so the change is not color alone
wu-input-affix Wrapper. Draws the field box around a prefix, the input and a suffix; takes sm and lg
wu-input-prefix, wu-input-suffix Parts. Text or an icon on the inline start and end; an svg child is sized to 1em
wu-input-clear Part, a button. Shown by the script while the field has text

Default

Section titled “Default”
<input class="wu-input" type="text" aria-label="Project name" placeholder="Project name">

Sizes

Section titled “Sizes”
<div class="flex col gap-3">
  <input class="wu-input sm" type="text" aria-label="Small" placeholder="Small">
  <input class="wu-input" type="text" aria-label="Default" placeholder="Default">
  <input class="wu-input lg" type="text" aria-label="Large" placeholder="Large">
</div>

States

Section titled “States”
<div class="flex col gap-3">
  <input class="wu-input" type="text" aria-label="Disabled" value="Disabled" disabled>
  <input class="wu-input" type="text" aria-label="Read only" value="Read only" readonly>
  <input class="wu-input" type="email" aria-label="Invalid" value="not-an-email" aria-invalid="true">
</div>

Prefix and suffix

Section titled “Prefix and suffix”

wu-input-affix draws the field box and holds a wu-input between a wu-input-prefix and a wu-input-suffix. Focus, hover, invalid and disabled states cover the whole box. The parts sit on the inline start and end, so they swap in right-to-left text. Put sm or lg on the wrapper. A wu-select can take the place of the input.

$ USD
kg
@
@ 
<div class="flex col gap-3">
  <div class="wu-input-affix">
    <span class="wu-input-prefix"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg></span>
    <input class="wu-input" type="text" aria-label="Search" placeholder="Search">
  </div>
  <div class="wu-input-affix">
    <span class="wu-input-prefix">$</span>
    <input class="wu-input" type="number" aria-label="Price" value="49">
    <span class="wu-input-suffix">USD</span>
  </div>
  <div class="wu-input-affix sm">
    <input class="wu-input" type="text" aria-label="Weight" value="12">
    <span class="wu-input-suffix">kg</span>
  </div>
  <div class="wu-input-affix">
    <span class="wu-input-prefix">@</span>
    <input class="wu-input" type="text" aria-label="Username" value="taken" aria-invalid="true">
  </div>
  <div class="wu-input-affix">
    <span class="wu-input-prefix">@</span>
    <input class="wu-input" type="text" aria-label="Disabled" value="locked" disabled>
  </div>
</div>

Clear button

Section titled “Clear button”

Add a wu-input-clear button after the input, inside the affix. The kit script shows it while the field has text, clears the field, fires input and change, and returns focus to the input. Give the button an aria-label; an empty button shows a multiplication sign. On type="search" the browser’s own clear mark is hidden, so only one shows.

<div class="flex col gap-3">
  <div class="wu-input-affix">
    <input class="wu-input" type="text" aria-label="Project name" value="Quarterly report">
    <button class="wu-input-clear" type="button" aria-label="Clear"></button>
  </div>
  <div class="wu-input-affix">
    <span class="wu-input-prefix"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg></span>
    <input class="wu-input" type="search" aria-label="Search" value="invoices">
    <button class="wu-input-clear" type="button" aria-label="Clear search"></button>
  </div>
</div>

Load only the input

Section titled “Load only the input”
@use "@wovenui/components/input";

The input needs no other component. It relies on core’s base styles for inputs, which @use "@wovenui/core" emits when the base feature flag is on (the default).