FieldFieldset() — ui Function Reference

Architecture documentation for the FieldFieldset() function in field-fieldset.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FieldFieldset() — ui Function Reference

Dependency Diagram

graph TD
  11a0542b_dcee_0a02_8880_10528d512e5b["FieldFieldset()"]
  3570ad3f_d45d_f2bd_1fb1_53939ba5212d["field-fieldset.tsx"]
  11a0542b_dcee_0a02_8880_10528d512e5b -->|defined in| 3570ad3f_d45d_f2bd_1fb1_53939ba5212d
  style 11a0542b_dcee_0a02_8880_10528d512e5b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/field-fieldset.tsx lines 11–36

export function FieldFieldset() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend>Address Information</FieldLegend>
      <FieldDescription>
        We need your address to deliver your order.
      </FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="street">Street Address</FieldLabel>
          <Input id="street" type="text" placeholder="123 Main St" />
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel htmlFor="city">City</FieldLabel>
            <Input id="city" type="text" placeholder="New York" />
          </Field>
          <Field>
            <FieldLabel htmlFor="zip">Postal Code</FieldLabel>
            <Input id="zip" type="text" placeholder="90502" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}