Input

Text input fields with labels, icons, and validation states.

PreviousButton

NextSwitch

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Input

Text input fields with labels, icons, and validation states.

Inputs

Text input fields with clean borders, labels, validation states, and helper descriptions.

When to use which variant

defaultStandard dashboard forms, database filtering, account creation

floating labelSleek onboarding forms, login panels, space-constrained headers

underlineUltra-minimal editorial interfaces, clean mobile web designs

icon left/rightSearch bars, password visibility toggles, credit cards

error stateForm validation failures to alert the user of mistakes

success stateConfirming custom identifiers (like usernames) are available

Interactive Playground

Live CanvasInteractive

Username

Choose a unique username.

Controls(9)

variant

select

Visual style of the input field

type

select

Input type

label

text

Optional label text above the field

description

text

Optional help description text

error

text

Optional validation error text

placeholder

text

Placeholder text

required

boolean

Toggle state:

Whether field is required

animate

boolean

Toggle state:

Whether to enable animations

disabled

boolean

Toggle state:

Whether the input is disabled

Generated JSX

Source

import { Input } from "nexoreui"

<Input />

Showcase & Examples

Default Input

component.tsx

Input with Label & Helper Text

Email Address

We will never share your email.

component.tsx

Floating Label Input

Username

component.tsx

Icon Left Input

component.tsx

Icon Right Input

component.tsx

Page 1 of 2

API Reference (Props)

Prop	Type	Default	Description
variant	"default" \| "glass" \| "gradient" \| "underline"	`"default"`	Visual style of the input border and background.
type	string	`"text"`	Standard HTML input type (e.g. text, password, email, number).
placeholder	string	`—`	Placeholder text shown when input is empty.
animate	boolean	`true`	Enables interactive focus and entry slide/fade animations.
disabled	boolean	`false`	Prevents user interaction and visually mutes the input.
label	string	`—`	Label text rendered above the input.
description	string	`—`	Supporting helper description text rendered below the input.
error	string	`—`	Validation error message. Displays in red and updates aria attributes.
required	boolean	`false`	Adds a required star indicator and applies native standard validation constraints.

Accessibility (a11y)

ARIA Relationships: If `label` is provided, the input automatically connects to the label. If `description` or `error` is provided, the input sets aria-describedby to link text elements for screen readers.
Validation State: When an error is active, the input receives aria-invalid="true" and the error label uses role="alert".
Keyboard Support: Fully focusable using standard Tab controls, displaying high-contrast outline focus rings.

PreviousButton

NextSwitch

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Inputs

Text input fields with clean borders, labels, validation states, and helper descriptions.

When to use which variant

defaultStandard dashboard forms, database filtering, account creation

floating labelSleek onboarding forms, login panels, space-constrained headers

underlineUltra-minimal editorial interfaces, clean mobile web designs

icon left/rightSearch bars, password visibility toggles, credit cards

error stateForm validation failures to alert the user of mistakes

success stateConfirming custom identifiers (like usernames) are available

Interactive Playground

Live CanvasInteractive

Username

Choose a unique username.

Controls(9)

variant

select

Visual style of the input field

type

select

Input type

label

text

Optional label text above the field

description

text

Optional help description text

error

text

Optional validation error text

placeholder

text

Placeholder text

required

boolean

Toggle state:

Whether field is required

animate

boolean

Toggle state:

Whether to enable animations

disabled

boolean

Toggle state:

Whether the input is disabled

Generated JSX

Source

import { Input } from "nexoreui"

<Input />

Showcase & Examples

Default Input

component.tsx

Input with Label & Helper Text

Email Address

We will never share your email.

component.tsx

Floating Label Input

Username

component.tsx

Icon Left Input

component.tsx

Icon Right Input

component.tsx

Page 1 of 2

API Reference (Props)

Prop	Type	Default	Description
variant	"default" \| "glass" \| "gradient" \| "underline"	`"default"`	Visual style of the input border and background.
type	string	`"text"`	Standard HTML input type (e.g. text, password, email, number).
placeholder	string	`—`	Placeholder text shown when input is empty.
animate	boolean	`true`	Enables interactive focus and entry slide/fade animations.
disabled	boolean	`false`	Prevents user interaction and visually mutes the input.
label	string	`—`	Label text rendered above the input.
description	string	`—`	Supporting helper description text rendered below the input.
error	string	`—`	Validation error message. Displays in red and updates aria attributes.
required	boolean	`false`	Adds a required star indicator and applies native standard validation constraints.

Accessibility (a11y)

ARIA Relationships: If `label` is provided, the input automatically connects to the label. If `description` or `error` is provided, the input sets aria-describedby to link text elements for screen readers.
Validation State: When an error is active, the input receives aria-invalid="true" and the error label uses role="alert".
Keyboard Support: Fully focusable using standard Tab controls, displaying high-contrast outline focus rings.