Fieldset

Agrupe controles de formulário relacionados com uma legenda opcional e estado desabilitado.

Importação

import { Fieldset } from 'asterui'

Exemplos

Fieldset Básico

Fieldset simples com legenda.

</>

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

Com Campos de Formulário

Fieldset contendo campos de formulário com rótulos.

</>

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 Desabilitado

Todos os controles de formulário dentro são desabilitados.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do fieldset	React.ReactNode	-
disabled	Desabilita todos os controles de formulário dentro	boolean	false
className	Classes CSS adicionais	string	-

Fieldset.Legend

Propriedade	Descrição	Tipo	Padrão
children	Texto ou conteúdo da legenda	React.ReactNode	-
className	Classes CSS adicionais	string	-

Fieldset.Label

Propriedade	Descrição	Tipo	Padrão
children	Texto ou conteúdo do rótulo	React.ReactNode	-
htmlFor	ID do elemento de formulário ao qual o rótulo se refere	string	-
className	Classes CSS adicionais	string	-