Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

When To Use

• A user input in a form field is needed
• A search input is required

Import

import { TxInput } from "tx-design-ui";

Examples

Basic Usage

Basic usage example.

import { TxInput } from "tx-design-ui";
import { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  return <TxInput placeholder="Enter text" value={value} onChange={e => setValue(e.target.value)} />;
}

Size

There are three sizes of an Input box: large, medium (default), and small.

<TxInput size="large" placeholder="Large input" />
<TxInput size="medium" placeholder="Medium input" />
<TxInput size="small" placeholder="Small input" />

Prefix and Suffix

You can use prefix and suffix props to add icons or other elements to the input.

import { SvgIcon } from "tx-design-ui";

<TxInput prefix={<SvgIcon.IconUserSquare01 />} placeholder="Username" />
<TxInput suffix={<SvgIcon.IconKeySquare01 />} placeholder="With suffix" />
<TxInput
  prefix={<SvgIcon.IconUserSquare01 />}
  suffix={<SvgIcon.IconKeySquare01 />}
  placeholder="With both"
/>

Status

Add status to Input with status, which could be success, warning, error, or info.

<TxInput status="success" placeholder="Success" />
<TxInput status="warning" placeholder="Warning" />
<TxInput status="error" placeholder="Error" />
<TxInput status="info" placeholder="Info" />

Fill Variant

Use the fill prop to create a filled input style.

<TxInput placeholder="Default outline" />
<TxInput fill placeholder="Filled input" />

// Combine with status
<TxInput fill status="success" placeholder="Success filled" />
<TxInput fill status="error" placeholder="Error filled" />

Password Input

Use password prop to create a password input with toggle visibility.

<TxInput password placeholder="Password" />
<TxInput password passwordToggle={false} placeholder="Password without toggle" />

Allow Clear

Make the Input clearable with allowClear prop.

<TxInput allowClear placeholder="Clearable input" />
<TxInput allowClear fill placeholder="Clearable filled input" />

Disabled

Disabled Input.

<TxInput disabled placeholder="Disabled input" />
<TxInput disabled fill placeholder="Disabled filled input" />

Custom Placeholder Color

You can customize the placeholder color using the placeholderColor prop.

<TxInput placeholder="Custom placeholder" placeholderColor="#ff6b6b" />

Combined Features

Combine multiple features for advanced usage.

import { SvgIcon } from "tx-design-ui";

<TxInput
  prefix={<SvgIcon.IconUserSquare01 />}
  status="success"
  size="large"
  allowClear
  placeholder="Advanced input"
/>

<TxInput
  password
  prefix={<SvgIcon.IconKeySquare01 />}
  status="error"
  allowClear
  placeholder="Password with features"
/>

API

Property	Type	Default	Description
value	string | number	-	The input content value
onChange	function(e)	-	Callback when user input
placeholder	string	""	The placeholder text
type	'text' | 'password' | 'email' | 'number' | 'tel' | 'url'	'text'	The type of input
size	'small' | 'medium' | 'large'	'medium'	The size of the input box
disabled	boolean	false	Whether the input is disabled
prefix	ReactNode	-	The prefix icon or element for the Input
suffix	ReactNode	-	The suffix icon or element for the Input
status	'success' | 'warning' | 'error' | 'info'	-	Set validation status
fill	boolean	false	Whether to use filled style
password	boolean	false	Whether to show password input
passwordToggle	boolean	true	Whether to show toggle password visibility button
allowClear	boolean	false	Whether to show clear button
onClear	function()	-	Callback when clear button is clicked
placeholderColor	string	'#8c9bab'	Custom placeholder text color
background	string	-	Custom background color
color	string	-	Custom text color
maxLength	number	-	Maximum length of input

Notes

• When using password prop, the input type will be automatically set to password
• The clear button only appears when there is a value in the input
• Status colors automatically apply to prefix/suffix icons
• The fill variant provides a different visual style with a filled background
• Password toggle icon changes based on password visibility state