Ir al contenido
AsterUI v0.12.76

Form

Envoltorio de formulario con validación, opciones de diseño y gestión de campos.

Importar

Sección titulada «Importar»
import { Form } from 'asterui'

Ejemplos

Sección titulada «Ejemplos»

Formulario Básico

Formulario de inicio de sesión simple con campos de nombre de usuario y contraseña.

 

 

 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item name="username" label="Username">
          <Input placeholder="Enter username" />
        </Form.Item>
        <Form.Item name="password" label="Password">
          <Input type="password" placeholder="Enter password" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">
            Login
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

Validación de Formulario

Formulario con reglas de validación para campos requeridos y patrón de email.

 

 

 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item
          name="email"
          label="Email"
          rules={[
            { required: true, message: 'Please enter your email' },
            { type: 'email', message: 'Please enter a valid email' }
          ]}
        >
          <Input placeholder="name@example.com" />
        </Form.Item>
        <Form.Item
          name="password"
          label="Password"
          rules={[
            { required: true, message: 'Please enter your password' },
            { min: 6, message: 'Password must be at least 6 characters' }
          ]}
        >
          <Input type="password" placeholder="Enter password" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

Tooltip y Extra

Etiquetas con iconos de ayuda de tooltip y texto de ayuda adicional debajo de los campos.

 

Username must be 3-20 characters
 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item
          name="username"
          label="Username"
          tooltip="Your unique identifier on the platform"
          extra="Username must be 3-20 characters"
          rules={[{ required: true }, { min: 3 }, { max: 20 }]}
        >
          <Input placeholder="Choose a username" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">Save</Button>
        </Form.Item>
      </Form>
    )
}

export default App

Retroalimentación de Validación

Muestra iconos de validación dentro de las entradas con la prop hasFeedback.

 

 

 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item
          name="email"
          label="Email"
          hasFeedback
          rules={[{ required: true }, { type: 'email' }]}
        >
          <Input placeholder="you@example.com" />
        </Form.Item>
        <Form.Item
          name="password"
          label="Password"
          hasFeedback
          rules={[
            { required: true },
            { min: 8, message: 'At least 8 characters' },
          ]}
        >
          <Input type="password" placeholder="Enter password" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">Register</Button>
        </Form.Item>
      </Form>
    )
}

export default App

Diseños de Formulario

Diferentes diseños de formulario: horizontal, vertical e inline.

 

 

 
import { Form, Input, Button, Radio, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [layout, setLayout] = useState<'horizontal' | 'vertical' | 'inline'>('vertical')
  
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Radio.Group
          value={layout}
          onChange={(e) => setLayout(e.target.value as typeof layout)}
        >
          <Radio value="vertical">Vertical</Radio>
          <Radio value="horizontal">Horizontal</Radio>
          <Radio value="inline">Inline</Radio>
        </Radio.Group>
  
        <Form layout={layout} onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
          <Form.Item name="name" label="Name" required>
            <Input placeholder="Enter name" />
          </Form.Item>
          <Form.Item name="email" label="Email" required>
            <Input placeholder="Enter email" />
          </Form.Item>
          <Form.Item>
            <Button color="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Space>
    )
}

export default App

Valores Iniciales

Formulario con valores iniciales pre-poblados.

 

 

 

 
import { Form, Input, Button, Textarea } from 'asterui'

function App() {
  const initialValues = {
    username: 'john_doe',
    email: 'john@example.com',
    bio: 'Software developer'
  }
  
  return (
      <Form initialValues={initialValues} onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item name="username" label="Username">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="Email">
          <Input />
        </Form.Item>
        <Form.Item name="bio" label="Bio">
          <Textarea rows={3} />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">
            Update Profile
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

Etiquetas Flotantes

Form.Item con etiquetas flotantes que se animan cuando están enfocadas.

 

 

 

 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item name="fullName" floatingLabel="Full Name" required>
          <Input />
        </Form.Item>
        <Form.Item name="email" floatingLabel="Email Address" required>
          <Input type="email" />
        </Form.Item>
        <Form.Item name="password" floatingLabel="Password" required>
          <Input type="password" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">
            Sign Up
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

Complementos de Formulario

Form.Item con texto/elementos antes o después de las entradas.

 

 

 

 
import { Form, Input, Button } from 'asterui'

function App() {
  return (
      <Form onFinish={(values) => alert(JSON.stringify(values, null, 2))}>
        <Form.Item name="website" label="Website" addonBefore="https://">
          <Input placeholder="your-site.com" />
        </Form.Item>
        <Form.Item name="price" label="Price" addonBefore="$" addonAfter=".00">
          <Input type="number" placeholder="0" />
        </Form.Item>
        <Form.Item name="email" label="Email" addonAfter="@company.com">
          <Input placeholder="username" />
        </Form.Item>
        <Form.Item>
          <Button color="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

Campos Dinámicos (Form.List)

Añade y elimina campos de formulario dinámicamente con Form.List.

 

 

 
import { Form, Input, Button, Space, Modal } from 'asterui'

function App() {
  return (
      <Form
        initialValues={{ guests: [{ name: '', email: '' }] }}
        onFinish={(values) => Modal.info({ title: 'Form Data', content: JSON.stringify(values, null, 2) })}
      >
        <Form.List name="guests">
          {(fields, { add, remove }) => (
            <Space direction="vertical" className="w-full">
              {fields.map((field, index) => (
                <Space key={field.id} className="w-full items-end">
                  <Form.Item
                    name={[field.name, 'name']}
                    label={index === 0 ? 'Name' : undefined}
                    rules={[{ required: true, message: 'Name required' }]}
                  >
                    <Input placeholder="Guest name" />
                  </Form.Item>
                  <Form.Item
                    name={[field.name, 'email']}
                    label={index === 0 ? 'Email' : undefined}
                    rules={[{ required: true }, { type: 'email' }]}
                  >
                    <Input placeholder="Email" />
                  </Form.Item>
                  <Form.Item>
                    <Button
                      type="button"
                      color="error"
                      variant="ghost"
                      size="sm"
                      onClick={() => remove(index)}
                      disabled={fields.length === 1}
                    >
                      Remove
                    </Button>
                  </Form.Item>
                </Space>
              ))}
              <Button type="button" variant="outline" onClick={() => add({ name: '', email: '' })}>
                + Add Guest
              </Button>
            </Space>
          )}
        </Form.List>
        <Form.Item>
          <Button color="primary" htmlType="submit" className="mt-4">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Sección titulada «API»

Form

Sección titulada «Form»
PropiedadDescripciónTipoPredeterminado
onFinishManejador de éxito (llamado cuando pasa la validación)(values: any) => void-
onFinishFailedManejador de fallo (llamado cuando falla la validación)(errorInfo: any) => void-
initialValuesValores iniciales de campos del formularioRecord<string, any>-
layoutOrientación del diseño del formulario'horizontal' | 'vertical' | 'inline''vertical'
labelWidthAncho de etiqueta en píxeles para diseño horizontalnumber60
sizeTamaño de controles del formulario'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
disabledDeshabilita todos los campos del formulariobooleanfalse
childrenContenido del formulario (elementos Form.Item)React.ReactNode-
classNameClases CSS adicionalesstring-

Form.Item

Sección titulada «Form.Item»
PropiedadDescripciónTipoPredeterminado
nameNombre del campo (requerido para validación)string-
labelTexto de etiqueta del campostring-
floatingLabelTexto de etiqueta flotante (alternativa a label)string-
addonBeforeTexto/elemento antes de la entrada (fuera)React.ReactNode-
addonAfterTexto/elemento después de la entrada (fuera)React.ReactNode-
rulesReglas de validaciónValidationRule[]-
requiredMarcar campo como requerido (abreviatura)booleanfalse
valuePropNameNombre de prop para el valor (ej. “checked” para checkboxes)string'value'
inlineRenderiza con ancho automático en lugar de ancho completobooleanfalse
tooltipTexto de tooltip a mostrar junto a la etiquetastring-
extraContenido adicional debajo del control del formularioReact.ReactNode-
hasFeedbackMostrar icono de retroalimentación de validaciónbooleanfalse
dependenciesNombres de campos que activan re-validación cuando cambianstring[]-
validateTriggerCuándo validar'onChange' | 'onBlur' | 'onSubmit' | array'onChange'
initialValueValor inicial para este campoany-
hiddenOcultar campo pero aún validar y enviarbooleanfalse
childrenElemento de control del formulario (Input, Select, etc.)React.ReactNode-
classNameClases CSS adicionalesstring-

Form.ErrorList

Sección titulada «Form.ErrorList»
PropiedadDescripciónTipoPredeterminado
fieldsNombres de campos específicos para mostrar errores (muestra todos si no se especifica)string[]-
classNameClases CSS adicionalesstring-

Form.List

Sección titulada «Form.List»

Gestiona arrays dinámicos de campos de formulario.

PropiedadDescripciónTipoPredeterminado
nameNombre del campo de arraystring-
childrenFunción de renderizado(fields, operations) => ReactNode-

Elemento de array de campos:

  • id - Identificador único para el campo
  • name - Índice del campo (usar en Form.Item name como [field.name, 'fieldKey'])

Operaciones:

  • add(value?) - Añade un nuevo campo con valor inicial opcional
  • remove(index) - Elimina campo en el índice
  • move(from, to) - Mueve campo de un índice a otro

Reglas de Validación

Sección titulada «Reglas de Validación»

La prop rules acepta un array de reglas de validación:

  • required: boolean - El campo es requerido
  • message: string - Mensaje de error a mostrar
  • type: 'email' | 'url' | 'number' - Validación de tipo integrada
  • min: number - Longitud mínima para cadenas o valor mínimo para números
  • max: number - Longitud máxima para cadenas o valor máximo para números
  • pattern: RegExp - Validación de patrón regex personalizado
  • validate: (value) => boolean | string | Promise - Función de validación personalizada