Text input fields with clean borders, labels, validation states, and helper descriptions.
defaultStandard dashboard forms, database filtering, account creationfloating labelSleek onboarding forms, login panels, space-constrained headersunderlineUltra-minimal editorial interfaces, clean mobile web designsicon left/rightSearch bars, password visibility toggles, credit cardserror stateForm validation failures to alert the user of mistakessuccess stateConfirming custom identifiers (like usernames) are availableChoose a unique username.
Visual style of the input field
Input type
Optional label text above the field
Optional help description text
Optional validation error text
Placeholder text
Whether field is required
Whether to enable animations
Whether the input is disabled
import { Input } from "nexoreui"
<Input />We will never share your email.
| 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. |
aria-describedby to link text elements for screen readers.aria-invalid="true" and the error label uses role="alert".