Fieldset

将相关的表单控件分组，支持可选的图例和禁用状态。

导入

import { Fieldset } from 'asterui'

示例

基础 Fieldset

带图例的简单 fieldset。

</>

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

带表单输入

包含带标签的表单输入的 Fieldset。

</>

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

内部所有表单控件都被禁用。

</>

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

属性	描述	类型	默认值
children	fieldset 的内容	React.ReactNode	-
disabled	禁用内部所有表单控件	boolean	false
className	额外的 CSS 类名	string	-

Fieldset.Legend

属性	描述	类型	默认值
children	图例文本或内容	React.ReactNode	-
className	额外的 CSS 类名	string	-

Fieldset.Label

属性	描述	类型	默认值
children	标签文本或内容	React.ReactNode	-
htmlFor	标签所针对的表单元素的 ID	string	-
className	额外的 CSS 类名	string	-