FormFieldSetDemo() — ui Function Reference

Architecture documentation for the FormFieldSetDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormFieldSetDemo() — ui Function Reference

Dependency Diagram

graph TD
  e6a037f7_de23_f6be_736c_90230165812b["FormFieldSetDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  e6a037f7_de23_f6be_736c_90230165812b -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style e6a037f7_de23_f6be_736c_90230165812b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 3134–3371

export function FormFieldSetDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>FieldSet & FieldLegend</CardTitle>
        <CardDescription>Different fieldset configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Basic FieldSet</FieldLegend>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="basic-name-czt">Name</FieldLabel>
                <Input id="basic-name-czt" placeholder="Enter your name" />
              </Field>
              <Field>
                <FieldLabel htmlFor="basic-email-32q">Email</FieldLabel>
                <Input
                  id="basic-email-32q"
                  type="email"
                  placeholder="email@example.com"
                />
              </Field>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>FieldSet with Description</FieldLegend>
            <FieldDescription>
              This fieldset includes a description to provide context.
            </FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="address-street-atj">
                  Street Address
                </FieldLabel>
                <Input id="address-street-atj" placeholder="123 Main St" />
              </Field>
              <FieldGroup className="grid grid-cols-2 gap-4">
                <Field>
                  <FieldLabel htmlFor="address-city-tpi">City</FieldLabel>
                  <Input id="address-city-tpi" placeholder="New York" />
                </Field>
                <Field>
                  <FieldLabel htmlFor="address-zip">ZIP Code</FieldLabel>
                  <Input id="address-zip" placeholder="10001" />
                </Field>
              </FieldGroup>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>Communication Preferences</FieldLegend>
            <FieldDescription>
              Choose how you&apos;d like us to keep in touch with you.
            </FieldDescription>
            <FieldGroup>
              <FieldSet>
                <FieldLegend className="text-sm">
                  Preferred Contact Method
                </FieldLegend>
                <FieldDescription>
                  Choose how you&apos;d like us to keep in touch with you.
                </FieldDescription>
                <RadioGroup defaultValue="email">
                  <Field orientation="horizontal">
                    <RadioGroupItem value="email" id="contact-email-hxb" />
                    <FieldLabel
                      htmlFor="contact-email-hxb"
                      className="font-normal"
                    >
                      Email
                    </FieldLabel>
                  </Field>
                  <Field orientation="horizontal">
                    <RadioGroupItem value="phone" id="contact-phone-7id" />
                    <FieldLabel
                      htmlFor="contact-phone-7id"
                      className="font-normal"
                    >
                      Phone
                    </FieldLabel>