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
  4704b2e6_6408_ea64_8d7f_492ea8ecb72c["FieldFieldset()"]
  f3d02f0c_2168_0284_4af4_9f9a45faee29["field-fieldset.tsx"]
  4704b2e6_6408_ea64_8d7f_492ea8ecb72c -->|defined in| f3d02f0c_2168_0284_4af4_9f9a45faee29
  style 4704b2e6_6408_ea64_8d7f_492ea8ecb72c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}