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 ChartRegistry 6 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  cbf3dc91_439b_3a00_3e35_87c30b98a135["label-example.tsx"]
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  8b64d6be_c781_e1ef_267f_df08225927fd["checkbox"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> 8b64d6be_c781_e1ef_267f_df08225927fd
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  dc919c5d_820f_f2af_7ccd_a07763a51161["input"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> dc919c5d_820f_f2af_7ccd_a07763a51161
  e283b120_3e25_931b_59db_7a7787678698["label"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> e283b120_3e25_931b_59db_7a7787678698
  00ef2588_30dc_d13b_692f_0ddd7c373f64["textarea"]
  cbf3dc91_439b_3a00_3e35_87c30b98a135 --> 00ef2588_30dc_d13b_692f_0ddd7c373f64
  style cbf3dc91_439b_3a00_3e35_87c30b98a135 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
import { Field } from "@/registry/bases/radix/ui/field"
import { Input } from "@/registry/bases/radix/ui/input"
import { Label } from "@/registry/bases/radix/ui/label"
import { Textarea } from "@/registry/bases/radix/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, ChartRegistry 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/radix/examples/label-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free