Skip to content
Nana UI

Input

View .md Download

A text input with label, helper text, validation, prefix/suffix and clear support.

Preview

Section titled “Preview”

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/input";

Basic usage

Section titled “Basic usage”
<nana-input label="Email" placeholder="you@example.com" style="min-width:16rem"></nana-input>

Types

Section titled “Types”

Sizes

Section titled “Sizes”

States

Section titled “States”

Prefix & suffix

Section titled “Prefix & suffix”

Slot an icon (or any content) into the prefix / suffix slots.

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
autocomplete—HTMLInputElement['autocomplete']'off'
clearable—booleanfalse
disabled—booleanfalse
errorMessageerror-messagestring''
helperTexthelper-textstring''
inputId——`nana-input-${Math.random().toString(36).slice(2, 7)}`
inputModeinputmodestring''Which virtual keyboard to raise on touch devices. Distinct from `type`: `type="text" inputmode="decimal"` keeps free-form input while still opening a numeric pad, which is what amount and phone fields want. `inputMode` is also a global HTMLElement property, so this deliberately overrides it: on the host it is inert (the host is not editable), and the value only does anything once forwarded to the inner `` below.
invalid—booleanfalse
label—string''
loading—booleanfalse
max—string | undefined—Upper bound for `type="number"` / `type="date"` and friends.
maxlength—number | undefined—
min—string | undefined—Lower bound for `type="number"` / `type="date"` and friends.
minlength—number | undefined—
name—string''
pattern—string | undefined—Regular expression the value must match, per native constraint validation.
placeholder—string''
readonly—booleanfalse
required—booleanfalse
size—'xs' | 'sm' | 'md' | 'lg''md'
step—string | undefined—Granularity of the accepted value; `any` disables stepping.
type—HTMLInputElement['type']'text'
value—string''

Events

EventDescription
nana-inputFired on every keystroke (`detail.value`)
nana-changeFired when the value is committed (`detail.value`)
nana-clearFired when the clear button or Escape empties the field
nana-focusFired when the field gains focus
nana-blurFired when the field loses focus

Slots

SlotDescription
prefixContent before the field, in a fixed-width zone
suffixContent after the field, in a fixed-width zone

CSS parts

PartDescription
::part(wrapper)The bordered field container
::part(input)The native `<input>` element

CSS custom properties

PropertyDescription
--nana-input-bgField background colour
--nana-input-colorInput text colour
--nana-input-radiusField corner radius
--nana-input-heightField height (defaults to the size preset)
--nana-input-affix-insetGap from the border to a slotted prefix/suffix
--nana-input-affix-gapGap between a slotted prefix/suffix and the text
--nana-input-affix-zoneReserved width for a slotted prefix/suffix
--nana-input-affix-icon-sizeSize applied to a slotted icon, svg or img

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--nana-input-bg—Field background colour
--nana-input-color—Input text colour
--nana-input-radius—Field corner radius

CSS Parts

Section titled “CSS Parts”
PartDescription
wrapperThe bordered field container
inputThe native <input> element

Accessibility

Section titled “Accessibility”
  • Keyboard accessible
  • Screen-reader labels
  • Focus-visible states
  • ARIA roles and states
  • WCAG 2.2 AA contrast
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Input interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook