Aller au contenu
AsterUI v0.12.76

Form

Enveloppe de formulaire avec validation, options de mise en page et gestion des champs.

Importation

Section intitulée « Importation »
import { Form } from 'asterui'

Exemples

Section intitulée « Exemples »

Formulaire de base

Formulaire de connexion simple avec champs nom d'utilisateur et mot de passe.

 

 

 
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

Validation de formulaire

Formulaire avec règles de validation pour les champs requis et le motif d'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

Infobulle et extra

Étiquettes avec icônes d'aide en infobulle et texte d'aide supplémentaire sous les champs.

 

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

Retour de validation

Afficher les icônes de validation à l'intérieur des champs avec 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

Mises en page de formulaire

Différentes mises en page de formulaire : horizontale, verticale et en ligne.

 

 

 
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

Valeurs initiales

Formulaire avec valeurs initiales pré-remplies.

 

 

 

 
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

Étiquettes flottantes

Form.Item avec étiquettes flottantes qui s'animent au focus.

 

 

 

 
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 formulaire

Form.Item avec texte/éléments avant ou après les champs.

 

 

 

 
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

Champs dynamiques (Form.List)

Ajouter et supprimer des champs de formulaire dynamiquement avec 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

Section intitulée « API »

Form

Section intitulée « Form »
PropriétéDescriptionTypeDéfaut
onFinishGestionnaire de succès (appelé lorsque la validation réussit)(values: any) => void-
onFinishFailedGestionnaire d’échec (appelé lorsque la validation échoue)(errorInfo: any) => void-
initialValuesValeurs initiales des champs de formulaireRecord<string, any>-
layoutOrientation de la mise en page du formulaire'horizontal' | 'vertical' | 'inline''vertical'
labelWidthLargeur de l’étiquette en pixels pour la mise en page horizontalenumber60
sizeTaille des contrôles de formulaire'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
disabledDésactiver tous les champs de formulairebooleanfalse
childrenContenu du formulaire (éléments Form.Item)React.ReactNode-
classNameClasses CSS supplémentairesstring-

Form.Item

Section intitulée « Form.Item »
PropriétéDescriptionTypeDéfaut
nameNom du champ (requis pour la validation)string-
labelTexte de l’étiquette du champstring-
floatingLabelTexte de l’étiquette flottante (alternative à label)string-
addonBeforeTexte/élément avant le champ (à l’extérieur)React.ReactNode-
addonAfterTexte/élément après le champ (à l’extérieur)React.ReactNode-
rulesRègles de validationValidationRule[]-
requiredMarquer le champ comme requis (raccourci)booleanfalse
valuePropNameNom de la prop pour la valeur (par ex. “checked” pour les cases à cocher)string'value'
inlineRendre avec largeur automatique au lieu de largeur complètebooleanfalse
tooltipTexte d’infobulle à afficher à côté de l’étiquettestring-
extraContenu supplémentaire sous le contrôle de formulaireReact.ReactNode-
hasFeedbackAfficher l’icône de retour de validationbooleanfalse
dependenciesNoms de champs qui déclenchent la revalidation lors du changementstring[]-
validateTriggerQuand valider'onChange' | 'onBlur' | 'onSubmit' | array'onChange'
initialValueValeur initiale pour ce champany-
hiddenMasquer le champ mais toujours valider et soumettrebooleanfalse
childrenÉlément de contrôle de formulaire (Input, Select, etc.)React.ReactNode-
classNameClasses CSS supplémentairesstring-

Form.ErrorList

Section intitulée « Form.ErrorList »
PropriétéDescriptionTypeDéfaut
fieldsNoms de champs spécifiques pour lesquels afficher les erreurs (affiche tous si non spécifié)string[]-
classNameClasses CSS supplémentairesstring-

Form.List

Section intitulée « Form.List »

Gère les tableaux dynamiques de champs de formulaire.

PropriétéDescriptionTypeDéfaut
nameNom du champ tableaustring-
childrenFonction de rendu(fields, operations) => ReactNode-

Élément de tableau de champs :

  • id - Identifiant unique pour le champ
  • name - Index du champ (à utiliser dans le nom Form.Item comme [field.name, 'fieldKey'])

Opérations :

  • add(value?) - Ajouter un nouveau champ avec valeur initiale optionnelle
  • remove(index) - Supprimer le champ à l’index
  • move(from, to) - Déplacer le champ d’un index à un autre

Règles de validation

Section intitulée « Règles de validation »

La prop rules accepte un tableau de règles de validation :

  • required: boolean - Champ requis
  • message: string - Message d’erreur à afficher
  • type: 'email' | 'url' | 'number' - Validation de type intégrée
  • min: number - Longueur minimale pour les chaînes ou valeur minimale pour les nombres
  • max: number - Longueur maximale pour les chaînes ou valeur maximale pour les nombres
  • pattern: RegExp - Validation de motif regex personnalisé
  • validate: (value) => boolean | string | Promise - Fonction de validation personnalisée