Input

Needs review
WCAG 2.2 evidence
RTL
Web · iOS · Android

Single-line text field: label, a field box with optional leading and trailing icons, helper text and an inline error. Built on React Aria TextField: the label, helper and error are linked to the input (WCAG 1.3.1, 3.3.2), aria-invalid is set while invalid, and with isRequired / validate / native constraints the error appears on submit, focus moves to the first invalid field and its error is read with it (3.3.1, 4.1.3). The error shows an icon and text, never colour alone (1.4.1). Focus draws the brand border and the focus halo on the box (2.4.7). Paste, autofill and password managers are never blocked (3.3.7, 3.3.8). Consumer duties: label, helper and error wording; the right autoComplete token for personal data (1.3.5); explaining why a field is disabled.

import { Input } from "@nexera-ui/react";

Loading example…

8
examples: 36
props: 8
live controls: 3
platforms: 16
WCAG criteria: 20
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

description

placeholder

size

platform

isDisabledfalse

isReadOnlyfalse

isRequiredfalse

isInvalidfalse

Generated code

import { Input } from "@nexera-ui/react";

<Input />

Examples 7

The same examples as Storybook, rendered live. Open Code to copy one.

Sizes

Every Figma Size (32 / 40 / 48 px). Hover, click and tab into the fields to see the states.

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {
  return (
    <div className="flex flex-col gap-6">
      {sizes.map((size) => (
        <Input
          key={size}
          placeholder="e.g. Ayesha Khan"
          description="As it appears on official documents."
          size={size}
          label={`Full name (${size})`}
        />
      ))}
    </div>
  );
}

With icons

leadingIcon and trailingIcon. Both are decorative.

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";
import { LuMail, LuUser, LuX } from "react-icons/lu";

export function WithIcons() {
  return (
    <div className="flex flex-col gap-6">
      <Input
        label="Full name"
        placeholder="e.g. Ayesha Khan"
        description="As it appears on official documents."
        leadingIcon={<LuUser />}
      />
      <Input
        label="Work email"
        type="email"
        autoComplete="email"
        placeholder="name@company.com"
        description="We send payslips here."
        size="lg"
        leadingIcon={<LuMail />}
        trailingIcon={<LuX />}
      />
    </div>
  );
}

States

Semantic states: isDisabled, isInvalid + errorMessage, filled and read-only.

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <Input
        placeholder="e.g. Ayesha Khan"
        description="As it appears on official documents."
        label="Filled"
        defaultValue="Ayesha Khan"
      />
      <Input
        placeholder="e.g. Ayesha Khan"
        description="As it appears on official documents."
        label="Disabled"
        isDisabled
      />
      <Input
        placeholder="e.g. Ayesha Khan"
        description="As it appears on official documents."
        label="Error"
        isInvalid
        errorMessage="Enter a full name."
      />
      <Input
        placeholder="e.g. Ayesha Khan"
        description="As it appears on official documents."
        label="Read-only"
        defaultValue="E-104"
        isReadOnly
      />
    </div>
  );
}

Validation on submit

Validation on submit: the error appears under the field with an icon, focus moves to the first invalid field and the error is read with it. Autofill attributes are forwarded (autoComplete, type, inputMode) and paste is never blocked.

Loading example…

app.tsx

import { Form } from "react-aria-components";
import { Button, Input } from "@nexera-ui/react";

export function ValidationOnSubmit() {
  return (
    <Form
      className="flex flex-col gap-6"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <Input
        label="Full name"
        name="name"
        autoComplete="name"
        isRequired
        errorMessage="Enter a full name."
      />
      <Input
        label="Work email"
        name="email"
        type="email"
        autoComplete="email"
        isRequired
        description="We send payslips here."
        errorMessage={(validation) =>
          validation.validationDetails.typeMismatch
            ? "Enter a valid email, like name@company.com."
            : "Enter your work email."
        }
      />
      <Button type="submit" className="self-start">
        Save
      </Button>
    </Form>
  );
}

Platforms

Figma Input Mobile: iOS 50 pt and Android 52 dp boxes (radius 12, padding 16 / 12, 20 px icons, Body/Large).

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";
import { LuMail } from "react-icons/lu";

const platforms = ["web", "ios", "android"] as const;

export function Platforms() {
  return (
    <div className="flex flex-col gap-6">
      {platforms.map((platform) => (
        <Input
          key={platform}
          platform={platform}
          label={`Work email (${platform})`}
          placeholder="name@company.com"
          description="We send payslips here."
          leadingIcon={<LuMail />}
        />
      ))}
    </div>
  );
}

Long label

Long labels and helper texts wrap; the value scrolls inside the box.

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-[12rem]">
      <Input
        placeholder="e.g. Ayesha Khan"
        label="Name exactly as it appears on your national identity card or passport"
        description="Include every given name and family name, separated by spaces, without titles."
        defaultValue="Ayesha Khan binte Muhammad Rafiq Chaudhry"
      />
    </div>
  );
}

Right to left

Right-to-left: label, icon and padding mirror (logical properties).

Loading example…

app.tsx

import { Input } from "@nexera-ui/react";
import { LuUser } from "react-icons/lu";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <Input
        label="الاسم الكامل"
        placeholder="مثال: عائشة خان"
        description="كما يظهر في الوثائق الرسمية."
        leadingIcon={<LuUser />}
      />
      <Input
        label="البريد الإلكتروني"
        platform="ios"
        isInvalid
        errorMessage="أدخل بريدًا صالحًا."
      />
    </div>
  );
}

Props 36

Press "Try it" on a card to load that prop into the playground.

descriptionNexera

ReactNode

Helper text under the field. Explains the expected format before an error happens; linked to the input with aria-describedby. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text under the field, shown with an icon while the field is invalid (isInvalid, or a failed isRequired / validate / native constraint after submit) and linked with aria-describedby. Say what is wrong and how to fix it. A function receives React Aria's validation result. Defaults to the browser's validation message.

placeholderNexera

string

Example value shown while the field is empty, for example "e.g. Ayesha Khan". Never the only label: it disappears on typing and is not an accessible name.

sizeNexera

"sm" | "md" | "lg"

Height and type: 32 / 40 / 48 px on web with Body/Small, Body/Default and Body/Large. On iOS and Android the platform tokens give 44 / 50 / 56 pt and 48 / 52 / 56 dp, always with Body/Large.

platformNexera

"web" | "ios" | "android"

Platform look. Defaults to the NexeraProvider platform.

leadingIconNexera

ReactNode

Icon before the value. Decorative: hidden from assistive technology. 16 px (20 px at lg and on iOS and Android).

trailingIconNexera

ReactNode

Icon after the value. Decorative: hidden from assistive technology, so it must not be the only way to show a state or trigger an action.

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

enterKeyHintReact Aria

An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the value is invalid.

validateReact Aria

(value: string) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

valueReact Aria

string

The current value (controlled).

defaultValueReact Aria

string

The default value (uncontrolled).

onChangeReact Aria

(value: string) => void

Handler that is called when the value changes.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

autoCompleteReact Aria

string

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

maxLengthReact Aria

number

The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).

minLengthReact Aria

number

The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).

patternReact Aria

string

Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).

typeReact Aria

"search" | "text" | "url" | "tel" | "email" | "password" | (string & {})

The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).

inputModeReact Aria

Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

autoCorrectReact Aria

string

An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).

spellCheckReact Aria

string

An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

11 direct · 5 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.5Identify Input PurposeLevel AA · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.3Error SuggestionLevel AA · tested directly
3.3.7Redundant EntryLevel A · tested directly
3.3.8Accessible Authentication (Minimum)Level AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-focus-within
data-invalid

Usage

<Input className="data-focus-within:opacity-90 shadow-sm" />

Theme studio

Input

Try every prop. Copy the code.

Examples 7

Sizes

With icons

States

Validation on submit

Platforms

Long label

Right to left

Props 36

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components