Photonix

TextField

Allows users to enter and edit text.

Preview

Usage
import { TextField } from '@photonix/ultimate';

<TextField label="Label" placeholder="Placeholder" />

Component API

TextField

Prop
Type
Default
Description
label
string
-
Label text.
labelStyle
string
'outside'
Label position: 'outside' or 'inside'.
variant
string
'outlined'
Visual variant: 'outlined' or 'filled'.
placeholder
string
-
Placeholder text.
helperText
string
-
Supportive text below the input.
leadingIcon
ReactNode
-
Icon or element at the start.
leadingText
string
-
Text suffix at the start (e.g., "+84"). Kích hoạt Phone Mode nếu là ký tự số.
trailingIcon
ReactNode
-
Icon or element at the end.
trailingDropdownLabel
string
-
Label for the action dropdown at the end.
trailingDropdownOptions
Option[]
-
Options for the trailing dropdown.
trailingDropdownValue
string
-
Value for the controlled trailing dropdown.
onTrailingDropdownChange
function
-
Callback when dropdown value changes.
error
boolean
false
Show error state.
required
boolean
false
Show required indicator.
disabled
boolean
false
Disables the input.
readOnly
boolean
false
Makes the input read-only (không thể xóa/sửa).
showClear
boolean
true
Show clear (X) button when focused and has text.
onClear
function
-
Callback when clear button is clicked.
shortcutHint
string
-
Display a shortcut hint (Badge) at the end.
showCharacterCount
boolean
false
Show length counter (requires maxLength).
value
string
-
Controlled input value.
defaultValue
string
-
Initial value for uncontrolled mode.
onChange
function
-
Callback when value changes.

Variants

Visual Variants

TextField supports 'outlined' (default) and 'filled' styles to match different UI needs.

Visual Variants
<TextField label="Outlined" variant="outlined" placeholder="Default style" />
<TextField label="Filled" variant="filled" placeholder="Alternative style" />

Label Styles

Labels can be positioned outside (default) or inside the field.

Inside Label
Label Styles
<TextField label="Outside Label" labelStyle="outside" placeholder="Standard form" />
<TextField label="Inside Label" labelStyle="inside" />

Icons & Adornments

Add leading icons or text prefixes. Website allows free text, while phone prefixes restrict input to numbers.

https://
+84
Icons & Adornments
import { SearchOutline } from '@photonix/icons';

<TextField label="Search" leadingIcon={<SearchOutline />} placeholder="Search..." />
<TextField label="Website" leadingText="https://" placeholder="example.com" />
<TextField label="Phone" leadingText="+84" placeholder="912 345 678" />

Trailing Actions

Interactive elements at the end of the input, such as a currency dropdown.

USD
Trailing Actions
<TextField 
  label="Amount"
  trailingDropdownLabel="Currency"
  trailingDropdownOptions={[{ label: 'USD', value: 'usd' }, { label: 'EUR', value: 'eur' }]}
  trailingDropdownValue={currency}
  onTrailingDropdownChange={setCurrency}
  placeholder="0.00"
/>

States

Visual feedback for errors, disabled state, and helper text.

Invalid input
States
<TextField label="Error" error helperText="Invalid input" defaultValue="Wrong value" />
<TextField label="Disabled" disabled defaultValue="Cannot edit" />
<TextField label="Read Only" readOnly defaultValue="Read only text" />

On this page

Preview
Component API
Variants
Label Styles
Visual Variants
Icons & Adornments
States