Input

Stable

Text input field with label, variants, validation, and start/end content.

Installation

npm install @xaui/native

Import

import { TextInput } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

import { TextInput } from '@xaui/native/input'

export function Example() {
  return <TextInput />
}

Basic Input

A simple text input with a label.

import { TextInput } from '@xaui/native/input'

export function BasicExample() {
  return <TextInput label="Name" placeholder="Enter your name" />
}

Variants

All available visual styles.

import { TextInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={8}>
      <TextInput variant="colored" label="Colored" />
      <TextInput variant="light" label="Light" />
      <TextInput variant="bordered" label="Bordered" />
      <TextInput variant="underlined" label="Underlined" />
    </Column>
  )
}

Controlled Input

Manage the value with React state.

import { useState } from 'react'
import { TextInput } from '@xaui/native/input'

export function ControlledExample() {
  const [value, setValue] = useState('')

  return (
    <TextInput
      label="Username"
      value={value}
      onValueChange={setValue}
    />
  )
}

Password Input

Hide input text with isSecured.

import { TextInput } from '@xaui/native/input'

export function PasswordExample() {
  return <TextInput label="Password" isSecured placeholder="••••••••" />
}

With Validation

Show an error message when the field is invalid.

import { TextInput } from '@xaui/native/input'

export function ValidationExample() {
  return (
    <TextInput
      label="Email"
      isInvalid
      errorMessage="Please enter a valid email address"
      description="We will never share your email"
    />
  )
}

With Start & End Content

Add icons or labels inside the input.

import { TextInput } from '@xaui/native/input'
import { Typography } from '@xaui/native/typography'

export function WithContentExample() {
  return (
    <TextInput
      label="Amount"
      startContent={<Typography>$</Typography>}
      endContent={<Typography>USD</Typography>}
      placeholder="0.00"
    />
  )
}

Clearable Input

Show a clear button to reset the value.

import { useState } from 'react'
import { TextInput } from '@xaui/native/input'

export function ClearableExample() {
  const [value, setValue] = useState('Hello world')

  return (
    <TextInput
      label="Search"
      value={value}
      onValueChange={setValue}
      isClearable
    />
  )
}

Label Placement

Switch label rendering between inside and outside.

import { TextInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function LabelPlacementExample() {
  return (
    <Column gap={10}>
      <TextInput
        label="Inside Label"
        labelPlacement="inside"
        placeholder="Type here"
      />
      <TextInput
        label="Outside Label"
        labelPlacement="outside"
        placeholder="Type here"
      />
    </Column>
  )
}

Sizes and Radius

Tune field density and shape.

import { TextInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function SizesAndRadiusExample() {
  return (
    <Column gap={10}>
      <TextInput size="sm" radius="sm" label="Small" placeholder="sm + sm" />
      <TextInput size="md" radius="md" label="Medium" placeholder="md + md" />
      <TextInput size="lg" radius="full" label="Large pill" placeholder="lg + full" />
    </Column>
  )
}

Disabled and Read-Only

Compare non-editable input states.

import { TextInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function StatesExample() {
  return (
    <Column gap={10}>
      <TextInput label="Disabled" defaultValue="Cannot edit" isDisabled />
      <TextInput label="Read-only" value="Visible but locked" isReadOnly />
      <TextInput label="Full width" placeholder="Stretches to container width" fullWidth />
    </Column>
  )
}

Input Mode

Hint the mobile keyboard type with inputMode.

import { TextInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function InputModeExample() {
  return (
    <Column gap={10}>
      <TextInput label="Email" inputMode="email" placeholder="name@example.com" />
      <TextInput label="Phone" inputMode="tel" placeholder="+1 234 567 890" />
      <TextInput label="Amount" inputMode="decimal" placeholder="0.00" />
      <TextInput label="Search" inputMode="search" placeholder="Search..." />
    </Column>
  )
}

Custom Appearance

Override field and text style tokens with customAppearance.

import { TextInput } from '@xaui/native/input'

export function CustomAppearanceExample() {
  return (
    <TextInput
      label="Promo Code"
      placeholder="SUMMER24"
      customAppearance={{
        container: {
          borderWidth: 1,
          borderColor: '#c7d2fe',
          backgroundColor: '#eef2ff',
        },
        input: {
          fontWeight: '600',
          letterSpacing: 0.4,
        },
      }}
    />
  )
}