Form

Wrapper de formulário com validação, opções de layout e gerenciamento de campos.

Importação

import { Form } from 'asterui'

Exemplos

Formulário Básico

Formulário de login simples com campos de nome de usuário e senha.

</>

Username

 

Password

 

Login

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

Validação de Formulário

Formulário com regras de validação para campos obrigatórios e padrão de e-mail.

</>

Email

 

Password

 

Submit

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 e Extra

Rótulos com ícones de tooltip de ajuda e texto auxiliar extra abaixo dos campos.

</>

Username

 

Username must be 3-20 characters

Save

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

Feedback de Validação

Mostrar ícones de validação dentro de inputs com prop hasFeedback.

</>

Email

 

Password

 

Register

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

Layouts de Formulário

Diferentes layouts de formulário: horizontal, vertical e inline.

</>

VerticalHorizontalInline

Name*

 

Email*

 

Submit

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 Iniciais

Formulário com valores iniciais pré-preenchidos.

</>

Username

 

Email

 

Bio

Software developer

 

Update Profile

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

Rótulos Flutuantes

Form.Item com rótulos flutuantes que animam quando focados.

</>

Full Name*

 

Email Address*

 

Password*

 

Sign Up

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

Addons de Formulário

Form.Item com texto/elementos antes ou depois dos inputs.

</>

Websitehttps://

 

Price$

.00

 

Email

@company.com

 

Submit

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)

Adicione e remova campos de formulário dinamicamente com Form.List.

</>

Name

 

Email

 

Remove

+ Add Guest

Submit

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

Form

Propriedade	Descrição	Tipo	Padrão
onFinish	Manipulador de sucesso (chamado quando validação passa)	(values: any) => void	-
onFinishFailed	Manipulador de falha (chamado quando validação falha)	(errorInfo: any) => void	-
initialValues	Valores iniciais dos campos do formulário	Record<string, any>	-
layout	Orientação do layout do formulário	'horizontal' | 'vertical' | 'inline'	'vertical'
labelWidth	Largura do rótulo em pixels para layout horizontal	number	60
size	Tamanho dos controles do formulário	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
disabled	Desabilitar todos os campos do formulário	boolean	false
children	Conteúdo do formulário (elementos Form.Item)	React.ReactNode	-
className	Classes CSS adicionais	string	-

Form.Item

Propriedade	Descrição	Tipo	Padrão
name	Nome do campo (obrigatório para validação)	string	-
label	Texto do rótulo do campo	string	-
floatingLabel	Texto do rótulo flutuante (alternativa a label)	string	-
addonBefore	Texto/elemento antes do input (fora)	React.ReactNode	-
addonAfter	Texto/elemento depois do input (fora)	React.ReactNode	-
rules	Regras de validação	ValidationRule[]	-
required	Marcar campo como obrigatório (atalho)	boolean	false
valuePropName	Nome da prop para valor (ex: “checked” para checkboxes)	string	'value'
inline	Renderizar com largura automática em vez de largura total	boolean	false
tooltip	Texto do tooltip para mostrar ao lado do rótulo	string	-
extra	Conteúdo adicional abaixo do controle do formulário	React.ReactNode	-
hasFeedback	Mostrar ícone de feedback de validação	boolean	false
dependencies	Nomes de campos que acionam re-validação quando mudam	string[]	-
validateTrigger	Quando validar	'onChange' | 'onBlur' | 'onSubmit' | array	'onChange'
initialValue	Valor inicial para este campo	any	-
hidden	Ocultar campo mas ainda validar e enviar	boolean	false
children	Elemento de controle do formulário (Input, Select, etc.)	React.ReactNode	-
className	Classes CSS adicionais	string	-

Form.ErrorList

Propriedade	Descrição	Tipo	Padrão
fields	Nomes de campos específicos para mostrar erros (mostra todos se não especificado)	string[]	-
className	Classes CSS adicionais	string	-

Form.List

Gerencia arrays dinâmicos de campos de formulário.

Propriedade	Descrição	Tipo	Padrão
name	Nome do campo de array	string	-
children	Função de renderização	(fields, operations) => ReactNode	-

Item do array de fields:

• id - Identificador único para o campo
• name - Índice do campo (use em Form.Item name como [field.name, 'fieldKey'])

Operações:

• add(value?) - Adiciona um novo campo com valor inicial opcional
• remove(index) - Remove campo no índice
• move(from, to) - Move campo de um índice para outro

Regras de Validação

A prop rules aceita um array de regras de validação:

• required: boolean - Campo é obrigatório
• message: string - Mensagem de erro a exibir
• type: 'email' | 'url' | 'number' - Validação de tipo embutida
• min: number - Comprimento mínimo para strings ou valor mínimo para números
• max: number - Comprimento máximo para strings ou valor máximo para números
• pattern: RegExp - Validação de padrão regex personalizado
• validate: (value) => boolean | string | Promise - Função de validação personalizada