#Field Types

Schema FormX defines 5 basic field types that are used to determine the type of form control and the type of bound data.

#Field Type List

#Default Values

When form initializes, default values are automatically set based on field type:

Override defaults using defaultData:

<Form 
  schema={schema}
  defaultData={{
    name: 'John',       // Override string default
    age: 25,            // Override number default
    agree: true         // Override boolean default
  }}
/>

#Empty Value Rules

The following values are considered empty and will trigger required validation:

Note: The default error message is currently hardcoded in Chinese (${label}不能为空). To display English error messages, use a custom validator function to override the default required validation.

Important Notes:

• false for boolean type is NOT empty - required validation passes
• 0 for number type is NOT empty - required validation passes
• Empty string '' is considered empty for all types

Data Type Conversion: Schema FormX does not perform automatic type conversion. If a field is declared as type: 'number', the bound data will be whatever value the component's onChange emits (e.g., if the component emits a string "123", the data value will be "123", not 123). It is the component's responsibility to emit values of the correct type.

#String Type

The string type is the most commonly used field type, suitable for text input.

#Basic Usage

{
  type: 'string',
  name: 'username',
  label: 'Username',
  required: true,
  props: {
    placeholder: 'Please enter username'
  }
}

#Common Props

#Examples

// Email input
{
  type: 'string',
  name: 'email',
  label: 'Email',
  props: {
    type: 'email',
    placeholder: 'Please enter email address'
  }
}

// Password input
{
  type: 'string',
  name: 'password',
  label: 'Password',
  props: {
    type: 'password',
    placeholder: 'Please enter password'
  }
}

Default Component: Input

Common Scenarios:

• Username, email, phone number
• Address, description
• Password, verification code

#Number Type

The number type is used for numeric input, supporting integers and floating-point numbers.

#Basic Usage

{
  type: 'number',
  name: 'age',
  label: 'Age',
  props: {
    min: 0,
    max: 120
  }
}

#Common Props

Note: The following props are commonly used props of the DefaultControl (default InputNumber component), passed via schema.props.

#Examples

// Price input
{
  type: 'number',
  name: 'price',
  label: 'Price',
  props: {
    min: 0,
    step: 0.01,
    precision: 2
  }
}

// Quantity input
{
  type: 'number',
  name: 'quantity',
  label: 'Quantity',
  props: {
    min: 1,
    max: 100,
    step: 1
  }
}

Default Component: InputNumber

Common Scenarios:

• Age, quantity
• Price, amount
• Score, percentage

#Boolean Type

The boolean type is used for boolean values, usually corresponding to checkboxes or switches.

#Basic Usage

{
  type: 'boolean',
  name: 'agree',
  label: 'I agree to the user agreement'
}

#Common Props

Note: The following props are commonly used props of the DefaultControl (default Checkbox/Switch component), passed via schema.props.

#Examples

// Agreement confirmation
{
  type: 'boolean',
  name: 'agreeTerms',
  label: 'I have read and agree to the user agreement'
}

// Enable status
{
  type: 'boolean',
  name: 'enabled',
  label: 'Enable',
  props: {
    checkedText: 'Enabled',
    uncheckedText: 'Disabled'
  }
}

Default Component: Checkbox

Common Scenarios:

• Agreement confirmation
• Enable/disable option
• Yes/no selection

#Object Type

The object type is used for complex data structures that need to be managed as a whole. It requires a custom component.

#Basic Usage

// Custom address picker component
const AddressPicker = ({ value = {}, onChange }) => (
  <div>
    <input 
      placeholder="Province" 
      value={value.province || ''} 
      onChange={(e) => onChange({ ...value, province: e.target.value })} 
    />
    <input 
      placeholder="City" 
      value={value.city || ''} 
      onChange={(e) => onChange({ ...value, city: e.target.value })} 
    />
  </div>
);

// Register component
const components = {
  DefaultControl: MyInput,
  AddressPicker
};

// Using object type
{
  type: 'object',
  name: 'address',
  label: 'Address',
  component: 'AddressPicker'
}

Default Component: Custom component required

Common Scenarios:

• Address selection (Province/City/District)
• Coordinate selection (Longitude/Latitude)
• Structured input for complex objects

Default Value: Object type defaults to {}, empty object {} is considered empty in required validation.

#Array Type

The array type is used for list data that needs to be managed as a set. It requires a custom component.

#Basic Usage

// Custom tag input component
const TagInput = ({ value = [], onChange }) => {
  const [input, setInput] = useState('');

  const addTag = () => {
    if (input.trim()) {
      onChange([...value, input.trim()]);
      setInput('');
    }
  };

  const removeTag = (index) => {
    onChange(value.filter((_, i) => i !== index));
  };

  return (
    <div>
      <div>
        {value.map((tag, index) => (
          <span key={index}>
            {tag}
            <button onClick={() => removeTag(index)}>×</button>
          </span>
        ))}
      </div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTag}>Add</button>
    </div>
  );
};

// Register component
const components = {
  DefaultControl: MyInput,
  TagInput
};

// Using array type
{
  type: 'array',
  name: 'tags',
  label: 'Tags',
  component: 'TagInput'
}

Default Component: Custom component required

Common Scenarios:

• Tag input
• File upload list
• Multiple selections

Default Value: Array type defaults to [], empty array [] is considered empty in required validation.

#Field Type Examples

#Input Component

#Type Selection Guide

When to use String type:

• Text input
• Single-line or multi-line text
• Dropdown selection
• Date selection

When to use Number type:

• Numeric values
• Quantities, amounts
• Scores, percentages

When to use Boolean type:

• Yes/no choices
• Enable/disable switches

When to use Object type:

• Nested structures
• Multi-field organized data
• Address, contact information

When to use Array type:

• Multiple values
• Dynamic list
• Tag input

#Related Documentation

• Form Configuration - Learn about schema structure
• Custom Components - Learn how to customize components