Photonix

TextField

Allows users to enter and edit text.

Preview

⌘K
Use a name, email, or project code.
Usage
"use client";

import { TextField } from '@photonix/ultimate';
import { SearchOutline } from '@photonix/icons';

export default function TextFieldBasicExample() {
    return (
        <TextField
            label="Search"
            labelStyle="outside"
            placeholder="Search projects"
            helperText="Use a name, email, or project code."
            leadingIcon={<SearchOutline />}
            shortcutHint="⌘K"
            showClear
            width={360}
        />
    );
}

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
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldLabelsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField label="Outside Label" labelStyle="outside" placeholder="Standard form" />
            <TextField label="Inside Label" labelStyle="inside" />
        </Flex>
    );
}

Icons & Adornments

Add leading icons or text prefixes. Phone prefixes restrict input to numbers.

https://
+84
Icons & Adornments
"use client";

import { Flex, TextField } from '@photonix/ultimate';
import { SearchOutline } from '@photonix/icons';

export default function TextFieldIconsExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField label="Search" leadingIcon={<SearchOutline />} placeholder="Search..." />
            <TextField label="Website" leadingText="https://" placeholder="example.com" />
            <TextField label="Phone" leadingText="+84" placeholder="912 345 678" />
        </Flex>
    );
}

Trailing Actions

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

USD
Trailing Actions
"use client";

import { useState } from 'react';
import { Flex, TextField } from '@photonix/ultimate';

const currencyOptions = [
    { value: 'usd', label: 'USD' },
    { value: 'eur', label: 'EUR' },
    { value: 'vnd', label: 'VND' },
];

export default function TextFieldTrailingExample() {
    const [currency, setCurrency] = useState('usd');

    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField
                label="Amount"
                inputFormat="currency"
                formatOptions={{ separator: currency === 'vnd' ? '.' : ',' }}
                trailingDropdownLabel="Currency"
                trailingDropdownOptions={currencyOptions}
                trailingDropdownValue={currency}
                onTrailingDropdownChange={setCurrency}
                placeholder="0.00"
            />
        </Flex>
    );
}

States

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

Invalid input
States
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldStatesExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <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" />
        </Flex>
    );
}

Width & Full Width

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

Width & Full Width
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldWidthExample() {
    return (
        <Flex direction="column" gap="md" w="100%">
            <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%" />
        </Flex>
    );
}

Input Formats

Currency

Automatically inserts thousands separators while users type money amounts.

$
Currency
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldCurrencyExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField
                label="Amount (USD)"
                inputFormat="currency"
                leadingText="$"
                placeholder="0"
            />
            <TextField
                label="So tien (VND)"
                inputFormat="currency"
                formatOptions={{ separator: '.' }}
                placeholder="0"
            />
        </Flex>
    );
}

Phone Number

Automatically groups digits into readable phone-number chunks and only allows numbers.

+84
Phone Number
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldPhoneExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField
                label="Phone Number"
                inputFormat="phone"
                leadingText="+84"
                placeholder="912 345 678"
            />
        </Flex>
    );
}

Password

Automatically adds an eye toggle for showing and hiding password input.

Must be at least 8 characters
Password
"use client";

import { Flex, TextField } from '@photonix/ultimate';

export default function TextFieldPasswordExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField
                label="Password"
                inputFormat="password"
                helperText="Must be at least 8 characters"
                placeholder="Enter your password"
            />
        </Flex>
    );
}

Bank Account & Card Number

Automatically groups every four digits for bank account and card number fields.

Bank Account & Card Number
"use client";

import { Flex, TextField } from '@photonix/ultimate';
import { CreditCardOutline } from '@photonix/icons';

export default function TextFieldBankCardExample() {
    return (
        <Flex direction="column" gap="md" w="100%" maxW={400}>
            <TextField
                label="Bank Account"
                inputFormat="bankAccount"
                placeholder="0123 4567 8901"
            />
            <TextField
                label="Card Number"
                inputFormat="cardNumber"
                leadingIcon={<CreditCardOutline />}
                placeholder="4111 1111 1111 1111"
            />
        </Flex>
    );
}

On this page

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