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
"inside" | "outside"
'outside'
Whether the label is placed inside or outside the input box. Default is 'outside'.
helperText
string
-
Supporting text displayed below the field.
error
boolean
-
If true, the field will be in error state.
required
boolean
-
Mark the field as required (shows * indicator).
showCharacterCount
boolean
-
Show character count (requires maxLength to be set).
leadingIcon
React.ReactNode
-
Icon to display at the start of the field.
leadingText
string
-
Text/value to display at the start (e.g., country code "+84" or "$").
trailingDropdownLabel
string
-
Optional label for a dropdown action at the end of the field.
trailingDropdownOptions
TextFieldDropdownOption[]
-
Options for the trailing dropdown.
trailingDropdownValue
string
-
Selected value for the trailing dropdown.
defaultTrailingDropdownValue
string
-
Default value for the trailing dropdown (uncontrolled mode).
onTrailingDropdownChange
((value: string) => void)
-
Callback when trailing dropdown value changes.
onTrailingDropdownClick
(() => void)
-
Callback for when the trailing dropdown area is clicked (only if no options provided).
showClear
boolean
true
If true, shows a clear (X) button when there is text and focused.
onClear
(() => void)
-
Callback for when the clear button is clicked.
shortcutHint
string
-
Shortcut hint text to display (e.g., "Ctrl + /").
trailingIcon
React.ReactNode
-
Custom trailing icon element.
onTrailingIconClick
(() => void)
-
Callback for when the trailing icon is clicked.
size
"large" | "medium"
'large'
Size of the field. Default is 'large'.
fullWidth
boolean
true
If true, the field will take up the full width of its container. Default is true.
width
string | number
-
Fixed width of the field.
onChange
((value: string) => void)
-
Callback when the value changes.
portal
boolean
true
Whether to render the dropdown menu in a portal. Default is true.
inputFormat
InputFormat
-
Preset input format for automatic masking/formatting.
formatOptions
InputFormatOptions
-
Options for the input format preset.

Variants

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"
  inputFormat="currency"
  formatOptions={{ separator: currency === 'vnd' ? '.' : ',' }}
  trailingDropdownLabel="Currency"
  trailingDropdownOptions={[
    { label: 'USD', value: 'usd' },
    { label: 'EUR', value: 'eur' },
    { label: 'VND', value: 'vnd' }
  ]}
  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" />

Width & Full Width

TextField is full-width by default. You can set a fixed width or set fullWidth to false (auto width).

Width & Full Width
<TextField label="Auto Width" fullWidth={false} placeholder="Adjusts to content" />
<TextField label="Fixed Width" width="200px" placeholder="200px" />
<TextField label="Percentage Width" width="50%" placeholder="50%" />

Input Formats

Currency

Tự động chèn dấu phân cách hàng nghìn khi nhập số tiền. Hỗ trợ dấu phẩy (mặc định) hoặc dấu chấm cho format VN.

$
Currency
// USD format (comma separator)
<TextField
  label="Amount"
  inputFormat="currency"
  leadingText="$"
  placeholder="0"
/>

// VND format (dot separator)
<TextField
  label="Số tiền"
  inputFormat="currency"
  formatOptions={{ separator: '.' }}
  placeholder="0"
/>

Phone Number

Tự động nhóm các chữ số thành các cụm 3-3-3 để dễ đọc. Chỉ cho phép nhập số.

+84
Phone Number
<TextField
  label="Phone Number"
  inputFormat="phone"
  leadingText="+84"
  placeholder="912 345 678"
/>

Password

Tự động thêm icon Eye toggle để ẩn/hiện mật khẩu. Chặn dấu tiếng Việt và emoji, giữ lại ký tự đặc biệt cho mật khẩu mạnh.

Must be at least 8 characters
Password
<TextField
  label="Password"
  inputFormat="password"
  helperText="Must be at least 8 characters"
  placeholder="Enter your password"
/>

Bank Account & Card Number

Tự động nhóm mỗi 4 chữ số để dễ đọc. Card Number giới hạn tối đa 16 chữ số.

Bank Account & Card Number
<TextField
  label="Bank Account"
  inputFormat="bankAccount"
  placeholder="0123 4567 8901"
/>

<TextField
  label="Card Number"
  inputFormat="cardNumber"
  leadingIcon={<CreditCardOutline />}
  placeholder="4111 1111 1111 1111"
/>

On this page

Preview
Component API
Variants
Label Styles
Icons & Adornments
States
Input Formats
Currency
Phone Number
Password
Bank & Card
Photonix UI - React Components, Templates & Figma Design System