Form

Appearance

Resources
GitHub

Text ​

The text input type is used for general string input fields. It's the most common input type and supports various validation rules.

Properties ​

Required Properties ​

  • name (string): Unique identifier for the field
  • type (string): Must be 'text'
  • label (string): Display label for the field

Optional Properties ​

  • placeholder (string): Hint text shown when field is empty
  • disabled (boolean): Whether the field is disabled
  • layout (string): Layout type (default, horizontal)
  • rules (array): Validation rules for the field

Examples ​

Basic Text Field ​

typescript
{
  name: 'username',
  type: 'text',
  label: 'Username',
  placeholder: 'Enter username',
  rules: ['required']
}
Username*

Email Field ​

typescript
{
  name: 'email',
  type: 'text',
  label: 'Email Address',
  placeholder: 'Enter your email address',
  rules: ['required', 'email']
}
Email Address*

Password Field ​

typescript
{
  name: 'password',
  type: 'text',
  label: 'Password',
  placeholder: 'Enter your password',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => value.length >= 8',
      message: 'Password must be at least 8 characters'
    }
  ]
}
Password*

Phone Number Field ​

typescript
{
  name: 'phone',
  type: 'text',
  label: 'Phone Number',
  placeholder: '+1 (555) 123-4567',
  rules: [
    {
      type: 'regexp',
      pattern: /^\+?[\d\s\-\(\)]+$/,
      message: 'Invalid phone number format'
    }
  ]
}
Phone Number

URL Field ​

typescript
{
  name: 'website',
  type: 'text',
  label: 'Website',
  placeholder: 'https://example.com',
  rules: [
    {
      type: 'regexp',
      pattern: /^https?:\/\/.+/,
      message: 'Invalid URL format'
    }
  ]
}
Website

Postal Code Field ​

typescript
{
  name: 'postalCode',
  type: 'text',
  label: 'Postal Code',
  placeholder: '12345',
  rules: [
    {
      type: 'regexp',
      pattern: /^\d{5}(-\d{4})?$/,
      message: 'Invalid postal code format'
    }
  ]
}
Postal Code

Complex Form with Multiple Text Inputs ​

typescript
const schema = [
  {
    name: 'firstName',
    type: 'text',
    label: 'First Name',
    placeholder: 'Enter your first name',
    rules: ['required'],
  },
  {
    name: 'lastName',
    type: 'text',
    label: 'Last Name',
    placeholder: 'Enter your last name',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email',
    placeholder: 'Enter your email',
    rules: ['required', 'email'],
  },
  {
    name: 'phone',
    type: 'text',
    label: 'Phone',
    placeholder: '+1 (555) 123-4567',
    rules: [
      {
        type: 'regexp',
        pattern: /^\+?[\d\s\-\(\)]+$/,
        message: 'Invalid phone number format',
      },
    ],
  },
];
First Name*
Last Name*
Email*
Phone

Best Practices ​

  1. Use descriptive placeholders that guide user input
  2. Provide clear labels that explain what the field is for
  3. Set appropriate validation rules for the expected data
  4. Use regex patterns for format validation (phone, postal code, etc.)
  5. Consider accessibility with proper labels and placeholders
  6. Test validation thoroughly with various input scenarios
  7. Use consistent naming across your forms