ui Architecture Docs
Home / File/ field-group.tsx — ui Source File

field-group.tsx — ui Source File

Architecture documentation for field-group.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx DocumentationAtlas Changelog 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  fa86391a_6d0f_5ff7_ab92_83c474ed85fc["field-group.tsx"]
  701738bf_cdcf_955d_1e15_8125ef50e18b["checkbox"]
  fa86391a_6d0f_5ff7_ab92_83c474ed85fc --> 701738bf_cdcf_955d_1e15_8125ef50e18b
  e6c524b5_d047_d4f9_50b2_7f100d612cb2["field"]
  fa86391a_6d0f_5ff7_ab92_83c474ed85fc --> e6c524b5_d047_d4f9_50b2_7f100d612cb2
  style fa86391a_6d0f_5ff7_ab92_83c474ed85fc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Checkbox } from "@/examples/base/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
  FieldSet,
} from "@/examples/base/ui/field"

export default function FieldGroupExample() {
  return (
    <FieldGroup className="w-full max-w-xs">
      <FieldSet>
        <FieldLabel>Responses</FieldLabel>
        <FieldDescription>
          Get notified when ChatGPT responds to requests that take time, like
          research or image generation.
        </FieldDescription>
        <FieldGroup data-slot="checkbox-group">
          <Field orientation="horizontal">
            <Checkbox id="push" defaultChecked disabled />
            <FieldLabel htmlFor="push" className="font-normal">
              Push notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSeparator />
      <FieldSet>
        <FieldLabel>Tasks</FieldLabel>
        <FieldDescription>
          Get notified when tasks you&apos;ve created have updates.{" "}
          <a href="#">Manage tasks</a>
        </FieldDescription>
        <FieldGroup data-slot="checkbox-group">
          <Field orientation="horizontal">
            <Checkbox id="push-tasks" />
            <FieldLabel htmlFor="push-tasks" className="font-normal">
              Push notifications
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="email-tasks" />
            <FieldLabel htmlFor="email-tasks" className="font-normal">
              Email notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
    </FieldGroup>
  )
}

Domain

Subdomains

Functions

Dependencies

  • checkbox
  • field

Source

Frequently Asked Questions

What does field-group.tsx do?
field-group.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in field-group.tsx?
field-group.tsx defines 1 function(s): FieldGroupExample.
What does field-group.tsx depend on?
field-group.tsx imports 2 module(s): checkbox, field.
Where is field-group.tsx in the architecture?
field-group.tsx is located at apps/v4/examples/base/field-group.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/examples/base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free