Skip to content
nexubDesign System
v2.4.0

Components · Form & Input

Input

StableSince v0.0.1

Text input field for forms. Supports size variants, icons, addons, and validation states.

import { Input } from '@nexub/react';

Usage

Use it for

  • Capturing short free-form text (name, email, search term)

  • Single-line data entry within a form

  • Filtering or searching a list of items

  • Inline editing of a single value

Use something else for

  • Multi-line text — use Textarea instead

  • Choosing from a fixed list of options — use Select or Combobox

  • Numeric stepping — use NumberInput for increment/decrement control

  • Passwords — use PasswordInput which toggles visibility

Playground

Playground

Live
<Input size="md" placeholder="Enter value…" />

Examples

Default

Sizes

Invalid state

With label and helper

Props

Props
PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Control height and font size.
invalidbooleanfalseApplies error ring styling.
disabledbooleanfalseDisables the input.
placeholderstring—Placeholder text.
typestring'text'HTML input type attribute.
leadingIconReact.ReactNode—Icon rendered at the start of the input.
trailingIconReact.ReactNode—Icon rendered at the end of the input.
leadingAddonstring—Text addon rendered before the input (e.g. "https://").
trailingAddonstring—Text addon rendered after the input (e.g. ".com").

Accessibility

ARIA roles

textbox

Keyboard

  • Tab

    Moves focus to the input.

  • Esc

    Browsers may revert recent changes (autofill suggestions).

Focus

  • Visible focus ring on `:focus-visible`. Pair with a `<Label htmlFor>` so clicking the label moves focus into the field.

Screen reader

  • `invalid` toggles `aria-invalid="true"` so AT users hear the error state.

  • Use `aria-describedby` to associate `HelperText` or error messages.

Related components

Textarea

Form & Input

A multi-line text input with configurable resize behaviour, size, and validation states.

Number Input

Form & Input

A numeric input with increment and decrement controls, supporting min/max clamping and step.

Password Input

Form & Input

A password field with a built-in toggle to reveal or hide the entered value.

Search Input

Form & Input

A text input pre-wired with a search icon and a clear button for filtering content.