TextField

'use client';

import { TextField } from '@/ui/forms/TextField';

export function TextFieldDemo() {
  return (
    <div className="flex flex-col gap-16">
      <TextField
        label="Email Address"
        description="Enter your email address"
        placeholder="you@example.com"
        className="max-w-sm"
      />
      <TextField
        label="Disabled"
        description="This field is disabled"
        placeholder="Disabled input"
        disabled
        className="max-w-sm"
      />
      <TextField
        label="With Icon"
        description="This field has an icon"
        placeholder="Search..."
        icon="PeopleSingle"
        className="max-w-sm"
        validationStatus="success"
      />
      <TextField
        label="Error"
        description="This field has an error message"
        placeholder="Enter your text"
        className="max-w-sm"
        validationStatus="error"
        errorMessage="This is an error message"
      />
      <TextField
        label="Success"
        description="This field has a success message"
        placeholder="Enter your text"
        className="max-w-sm"
        validationStatus="success"
      />
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/text-field.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { TextField } from '@/docs/lib/ui/forms/text-field';
 
export function Component() {
  const [email, setEmail] = useState('');
 
  return (
    <TextField
      label="Email Address"
      description="We'll never share your email"
      placeholder="you@example.com"
      value={email}
      onChange={(name, value) => setEmail(value)}
      icon="MailDefault"
      required
      validationStatus="default"
      className="max-w-sm"
    />
  );
}

API Reference

TextField

Notes

• FormControl Integration: TextField is built on top of FormControl, providing consistent label, description, and error message layout across form fields

• Generic Value Type: Supports generic type parameter for type-safe value handling. By default uses string, but can be customized with TextField<number> or other types

• Automatic State Management: Uses internal useValue hook to manage state. Can be used as controlled or uncontrolled component

• Validation States: Three validation states available:

  • default: Standard grey border with black focus
  • error: Red border with cross icon on the right
  • success: Green border with checkmark icon on the right

• Validation Icons: Error (cross) and success (checkmark) icons automatically appear on the right side when validation status changes

• Icon Support: Optional icon can be displayed on the left side of the input using the icon prop with any IconicNames value

• Custom Formatter: The formatter prop allows transformation of input values before they're passed to onChange (e.g., uppercase conversion, number formatting)

• Disabled State: When disabled, the input displays grey background (bg-pearl) and grey text, and user interaction is blocked

• Rounded Pill Design: Input has rounded pill styling (rounded-pill) with consistent padding

• Dynamic Padding: Automatically adjusts padding based on presence of icons:

  • Left padding increases when icon is present
  • Right padding increases when validation icons are shown

• Automatic ID Generation: If no id is provided, React's useId hook generates a unique ID for accessibility

• Accessibility: Input includes aria-label attribute set to the field name for screen reader support

• Client Component: This is a client component (uses React hooks) and must be used in client-side contexts

• Data Attributes: Includes data-name="TextField" for testing and debugging purposes