Fieldset

Regrouper les contrôles de formulaire associés avec une légende optionnelle et un état désactivé.

Importation

import { Fieldset } from 'asterui'

Exemples

Fieldset de base

Simple fieldset avec légende.

</>

User Information

Group related form controls with a descriptive legend.

import { Fieldset } from 'asterui'

function App() {
  return (
      <Fieldset className="bg-base-200 border border-base-300 rounded-box p-4">
        <Fieldset.Legend>User Information</Fieldset.Legend>
        <p className="text-sm text-base-content/70">
          Group related form controls with a descriptive legend.
        </p>
      </Fieldset>
    )
}

export default App

Avec champs de formulaire

Fieldset contenant des champs de formulaire avec étiquettes.

</>

Contact Details

NameEmailPhone

import { Fieldset, Input } from 'asterui'

function App() {
  return (
      <Fieldset className="bg-base-200 border border-base-300 rounded-box p-4">
        <Fieldset.Legend>Contact Details</Fieldset.Legend>
        <Fieldset.Label>Name</Fieldset.Label>
        <Input placeholder="Enter your name" />
        <Fieldset.Label>Email</Fieldset.Label>
        <Input type="email" placeholder="Enter your email" />
        <Fieldset.Label>Phone</Fieldset.Label>
        <Input type="tel" placeholder="Enter your phone" />
      </Fieldset>
    )
}

export default App

Fieldset désactivé

Tous les contrôles de formulaire à l'intérieur sont désactivés.

</>

Disabled Form Section

UsernamePassword

import { Fieldset, Input } from 'asterui'

function App() {
  return (
      <Fieldset disabled className="bg-base-200 border border-base-300 rounded-box p-4">
        <Fieldset.Legend>Disabled Form Section</Fieldset.Legend>
        <Fieldset.Label>Username</Fieldset.Label>
        <Input placeholder="Cannot edit" />
        <Fieldset.Label>Password</Fieldset.Label>
        <Input type="password" placeholder="Cannot edit" />
      </Fieldset>
    )
}

export default App

API

Fieldset

Propriété	Description	Type	Défaut
children	Contenu du fieldset	React.ReactNode	-
disabled	Désactive tous les contrôles de formulaire à l’intérieur	boolean	false
className	Classes CSS supplémentaires	string	-

Fieldset.Legend

Propriété	Description	Type	Défaut
children	Texte ou contenu de la légende	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Fieldset.Label

Propriété	Description	Type	Défaut
children	Texte ou contenu de l’étiquette	React.ReactNode	-
htmlFor	ID de l’élément de formulaire auquel l’étiquette est associée	string	-
className	Classes CSS supplémentaires	string	-