Input

A cross-platform text input with label, error, icon, clear and validation support; works on web and React Native via XUIProvider themed contexts.

Installation

npm install @xsolla/xui-input

Imports

import { Input } from '@xsolla/xui-input';
import type { InputProps } from '@xsolla/xui-input';

Quick start

const [value, setValue] = useState('');

<Input
  label="Email"
  value={value}
  onChangeText={setValue}
  placeholder="[email protected]"
/>;

API Reference

<Input>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | string | — | Controlled value. | | placeholder | string | — | Placeholder shown when empty. | | onChange | (e: ChangeEvent<HTMLInputElement>) => void | — | Native change handler. | | onChangeText | (text: string) => void | — | Simplified change handler receiving the text. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Control size. | | disabled | boolean | false | Disable the input. | | label | string | — | Label rendered above the input. | | error | boolean | false | Apply error styling. | | errorMessage | string | — | Error message; also marks the input invalid. | | iconLeft | ReactNode | — | Icon on the left. | | iconRight | ReactNode | — | Icon on the right. | | iconRightSize | number \| string | — | Override the right-icon size. | | extraClear | boolean | false | Show a clear button when the input has a value. | | onRemove | () => void | — | Fired when the clear button is pressed. | | checked | boolean | false | Show a success indicator (suppressed when errorMessage is set). | | checkedIcon | ReactNode | <CheckCr /> | Override the checked icon. | | borderTopLeftRadius | number | — | Override top-left corner radius. | | borderTopRightRadius | number | — | Override top-right corner radius. | | borderBottomLeftRadius | number | — | Override bottom-left corner radius. | | borderBottomRightRadius | number | — | Override bottom-right corner radius. | | backgroundColor | string | — | Override the background colour. | | id | string | auto | HTML id; also wires up the label. | | aria-label | string | — | Accessible label when no visible label is present. | | testID | string | — | Test identifier. |

Input also accepts the standard InputHTMLAttributes (excluding size and onChange, which are redefined above).

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Examples

Sizes

<Input size="xs" placeholder="Extra small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
<Input size="xl" placeholder="Extra large" />

Icons

import { Search, Check } from '@xsolla/xui-icons';
import { Mail } from '@xsolla/xui-icons-base';

<Input iconLeft={<Search />} placeholder="Search..." />
<Input iconLeft={<Mail />} iconRight={<Check />} placeholder="Email" />

Clear button

const [value, setValue] = useState('Some text');

<Input
  value={value}
  onChangeText={setValue}
  extraClear
  onRemove={() => setValue('')}
  placeholder="Type something..."
/>;

Validation

const [email, setEmail] = useState('');
const error = email && !email.includes('@') ? 'Invalid email' : '';

<Input
  label="Email"
  value={email}
  onChangeText={setEmail}
  error={!!error}
  errorMessage={error}
  placeholder="[email protected]"
/>;

Disabled and success

<Input label="Disabled" value="Cannot edit" disabled />
<Input label="Username" value="johndoe" checked />

Custom border radius

<Input
  placeholder="Rounded"
  borderTopLeftRadius={20}
  borderTopRightRadius={20}
  borderBottomLeftRadius={20}
  borderBottomRightRadius={20}
/>

Accessibility

• Renders a semantic <input> whose aria-labelledby points at the id of the rendered <label> element (rather than the standard <label htmlFor> pairing).
• Error messages are linked through aria-describedby and announced via role="alert".
• aria-invalid and aria-disabled reflect error and disabled state.
• Pressing Escape blurs the input.