FieldFieldset() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ FieldFieldset() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/field-fieldset.tsx lines 11–38

export default function FieldFieldset() {
  return (
    <div className="w-full max-w-md space-y-6">
      <FieldSet>
        <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>
    </div>
  )
}