ui Architecture Docs
Home / File/ label-example.tsx — ui Source File

label-example.tsx — ui Source File

Architecture documentation for label-example.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 6 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  a136d774_ef25_618d_f0ce_a3be024849c9["label-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> f56be340_a522_c6f7_dec3_5906873d14c8
  d0febd7f_7a12_3e29_549e_74cdec6501df["checkbox"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> d0febd7f_7a12_3e29_549e_74cdec6501df
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> 106d51d9_3961_e810_478c_8a9c54987d20
  00db19de_4bff_5fd7_3fcb_a9b94babaf3b["label"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> 00db19de_4bff_5fd7_3fcb_a9b94babaf3b
  b13d50f9_6ce4_55bb_cb91_b23db28c24ab["textarea"]
  a136d774_ef25_618d_f0ce_a3be024849c9 --> b13d50f9_6ce4_55bb_cb91_b23db28c24ab
  style a136d774_ef25_618d_f0ce_a3be024849c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import { Checkbox } from "@/registry/bases/base/ui/checkbox"
import { Field } from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import { Label } from "@/registry/bases/base/ui/label"
import { Textarea } from "@/registry/bases/base/ui/textarea"

export default function LabelExample() {
  return (
    <ExampleWrapper>
      <LabelWithCheckbox />
      <LabelWithInput />
      <LabelDisabled />
      <LabelWithTextarea />
    </ExampleWrapper>
  )
}

function LabelWithCheckbox() {
  return (
    <Example title="With Checkbox">
      <Field orientation="horizontal">
        <Checkbox id="label-demo-terms" />
        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
      </Field>
    </Example>
  )
}

function LabelWithInput() {
  return (
    <Example title="With Input">
      <Field>
        <Label htmlFor="label-demo-username">Username</Label>
        <Input id="label-demo-username" placeholder="Username" />
      </Field>
    </Example>
  )
}

function LabelDisabled() {
  return (
    <Example title="Disabled">
      <Field data-disabled={true}>
        <Label htmlFor="label-demo-disabled">Disabled</Label>
        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
      </Field>
    </Example>
  )
}

function LabelWithTextarea() {
  return (
    <Example title="With Textarea">
      <Field>
        <Label htmlFor="label-demo-message">Message</Label>
        <Textarea id="label-demo-message" placeholder="Message" />
      </Field>
    </Example>
  )
}

Domain

Subdomains

Functions

Dependencies

  • checkbox
  • example
  • field
  • input
  • label
  • textarea

Source

Frequently Asked Questions

What does label-example.tsx do?
label-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in label-example.tsx?
label-example.tsx defines 5 function(s): LabelDisabled, LabelExample, LabelWithCheckbox, LabelWithInput, LabelWithTextarea.
What does label-example.tsx depend on?
label-example.tsx imports 6 module(s): checkbox, example, field, input, label, textarea.
Where is label-example.tsx in the architecture?
label-example.tsx is located at apps/v4/registry/bases/base/examples/label-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

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

Try Supermodel Free