Fieldset

Agrupa controles de formulario relacionados con una leyenda opcional y estado deshabilitado.

Importar

import { Fieldset } from 'asterui'

Ejemplos

Fieldset Básico

Fieldset simple con leyenda.

</>

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

Con Entradas de Formulario

Fieldset que contiene entradas de formulario con etiquetas.

</>

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 Deshabilitado

Todos los controles de formulario dentro están deshabilitados.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del fieldset	React.ReactNode	-
disabled	Deshabilita todos los controles de formulario dentro	boolean	false
className	Clases CSS adicionales	string	-

Fieldset.Legend

Propiedad	Descripción	Tipo	Predeterminado
children	Texto o contenido de la leyenda	React.ReactNode	-
className	Clases CSS adicionales	string	-

Fieldset.Label

Propiedad	Descripción	Tipo	Predeterminado
children	Texto o contenido de la etiqueta	React.ReactNode	-
htmlFor	ID del elemento de formulario para el que es la etiqueta	string	-
className	Clases CSS adicionales	string	-