Text Input

Text inputs allow users to enter and edit text. They support floating labels, validation states, leading/trailing elements, and multiple input types.

TextInput Playground

Preview

Code

Installation

You can add the text input component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @floating-ui/react @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

TextInput.tsx

Button.tsx

Dropdown.tsx

DropdownInput.tsx

Menu.tsx

MenuItem.tsx

CountryFlag.tsx

Loader.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { TextInput } from '@versaui/ui/components/TextInput';

<TextInput label="Email" placeholder="Enter email" />

Floating Label

The label floats above the input when focused or has a value:

<TextInput label="Username" showFloatingLabel />

// Without floating label
<TextInput label="Username" showFloatingLabel={false} placeholder="Enter username" />

Sizes

Three sizes are available — small, medium, and large:

<TextInput size="large" label="Large" />
<TextInput size="medium" label="Medium" />
<TextInput size="small" placeholder="Small (no label)" />

Validation States

Set status to show validation states:

<TextInput
  label="Email"
  status="error"
  errorText="Invalid email address"
/>

<TextInput
  label="Username"
  status="success"
  helperText="Username is available"
/>

Input Types

Leading Text

<TextInput
  label="Website"
  inputType="leadingText"
  leadingText="https://"
/>

Trailing Text

<TextInput
  label="Email"
  inputType="trailingText"
  trailingText="@example.com"
/>

Country

<TextInput
  label="Phone"
  inputType="country"
  selectedCountry="us"
/>

Button

<TextInput
  label="Copy Link"
  inputType="button"
  buttonIcon={<Copy />}
/>

Inline

<TextInput
  label="Amount"
  inputType="inline"
/>

Disabled and Read-Only

<TextInput label="Disabled" disabled value="Cannot edit" />
<TextInput label="Read Only" readOnly value="Read only value" />

Masked Input

<TextInput label="Password" masked />

Accessibility

Uses native <input> for full accessibility
Floating label serves as accessible label via aria-label
Error and helper text linked via aria-describedby
Required state announced via aria-required
Disabled and read-only states properly communicated
Focus ring visible on keyboard navigation

TextInput Props

Prop	Type	Default	Description
`size`	`'large' \| 'medium' \| 'small'`	`'medium'`	Input size.
`inputType`	`'default' \| 'leadingText' \| 'trailingText' \| 'country' \| 'button' \| 'inline'`	`'default'`	Input layout variant.
`status`	`'default' \| 'error' \| 'success'`	`'default'`	Validation status.
`label`	`string`	`''`	Floating label text.
`placeholder`	`string`	`—`	Placeholder text.
`showFloatingLabel`	`boolean`	`true`	Use floating label animation.
`helperText`	`string`	`—`	Helper text below input.
`errorText`	`string`	`—`	Error text (shown on error status).
`showSupportingText`	`boolean`	`true`	Show supporting text area.
`disabled`	`boolean`	`false`	Prevents interaction.
`readOnly`	`boolean`	`false`	Read-only state.
`required`	`boolean`	`false`	Mark as required.
`masked`	`boolean`	`false`	Mask input characters with password toggle.
`leadingIcon`	`ReactNode`	`—`	Icon at the start of input.
`trailingIcon`	`ReactNode`	`—`	Icon at the end of input.
`showLeadingIcon`	`boolean`	`true`	Show leading icon.
`showTrailingIcon`	`boolean`	`true`	Show trailing icon.
`leadingText`	`string`	`—`	Text prefix (leadingText type).
`trailingText`	`string`	`—`	Text suffix (trailingText type).
`buttonIcon`	`ReactNode`	`—`	Icon for button variant.
`selectedCountry`	`CountryCode`	`'us'`	Country code for country variant.
`onCountryChange`	`(country: CountryCode) => void`	`—`	Country selection handler.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page