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

field-example.tsx — ui Source File

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

File tsx ComponentRegistry UIPrimitives 14 imports 11 functions

Entity Profile

Dependency Diagram

graph LR
  88052f7e_baae_5fcd_95fe_0a964a30baa3["field-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  46c758ca_dd64_66c4_37b9_b30acc3c853c["input-otp"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 46c758ca_dd64_66c4_37b9_b30acc3c853c
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> f56be340_a522_c6f7_dec3_5906873d14c8
  bf2d636f_6015_e4c1_8092_f8992858a1ae["badge"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> bf2d636f_6015_e4c1_8092_f8992858a1ae
  d0febd7f_7a12_3e29_549e_74cdec6501df["checkbox"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> d0febd7f_7a12_3e29_549e_74cdec6501df
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 106d51d9_3961_e810_478c_8a9c54987d20
  d51f2add_91d7_46e2_5575_3ec3ee42822c["input-otp"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> d51f2add_91d7_46e2_5575_3ec3ee42822c
  d7a81682_7939_efa1_2cb0_ffb907cbcb71["native-select"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> d7a81682_7939_efa1_2cb0_ffb907cbcb71
  2fab7032_0940_d3ec_8fa0_41df24affbf1["radio-group"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 2fab7032_0940_d3ec_8fa0_41df24affbf1
  d80c6389_7118_33c6_94f6_8ae48c4d9f8b["select"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> d80c6389_7118_33c6_94f6_8ae48c4d9f8b
  0df66f45_ffa5_8f45_8677_89f4ccd3d80d["slider"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> 0df66f45_ffa5_8f45_8677_89f4ccd3d80d
  efabc05c_7f96_bd9b_4b64_661c4879c752["switch"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> efabc05c_7f96_bd9b_4b64_661c4879c752
  b13d50f9_6ce4_55bb_cb91_b23db28c24ab["textarea"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3 --> b13d50f9_6ce4_55bb_cb91_b23db28c24ab
  style 88052f7e_baae_5fcd_95fe_0a964a30baa3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { useState } from "react"
import { REGEXP_ONLY_DIGITS } from "input-otp"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import { Badge } from "@/registry/bases/base/ui/badge"
import { Checkbox } from "@/registry/bases/base/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/registry/bases/base/ui/input-otp"
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/registry/bases/base/ui/native-select"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/registry/bases/base/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/bases/base/ui/select"
import { Slider } from "@/registry/bases/base/ui/slider"
import { Switch } from "@/registry/bases/base/ui/switch"
import { Textarea } from "@/registry/bases/base/ui/textarea"

export default function FieldExample() {
  return (
    <ExampleWrapper>
      <InputFields />
      <TextareaFields />
      <SelectFields />
      <CheckboxFields />
      <RadioFields />
      <SwitchFields />
      <SliderFields />
      <NativeSelectFields />
// ... (1002 more lines)

Domain

Subdomains

Functions

Dependencies

  • badge
  • checkbox
  • example
  • field
  • input
  • input-otp
  • input-otp
  • native-select
  • radio-group
  • react
  • select
  • slider
  • switch
  • textarea

Source

Frequently Asked Questions

What does field-example.tsx do?
field-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 field-example.tsx?
field-example.tsx defines 11 function(s): CheckboxFields, FieldExample, HorizontalFields, InputFields, InputOTPFields, NativeSelectFields, RadioFields, SelectFields, SliderFields, SwitchFields, and 1 more.
What does field-example.tsx depend on?
field-example.tsx imports 14 module(s): badge, checkbox, example, field, input, input-otp, input-otp, native-select, and 6 more.
Where is field-example.tsx in the architecture?
field-example.tsx is located at apps/v4/registry/bases/base/examples/field-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