FieldDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FieldDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FieldDemo() {
  return (
    <div className="@container w-full">
      <div className="bg-muted grid gap-4 p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
        <div className="flex flex-col gap-6">
          <BasicFields />
          <PrivacySettings />
          <HearAboutUs />
          <ClusterConfig />
          <ShippingMethods />
        </div>
        <div className="flex flex-col gap-6">
          <SubscriptionPlan />
          <FormInputDemo />
          <FormInputTypesDemo />
          <FeedbackForm />
          <JobApplicationForm />
          <FormDatePickerDemo />
          <LoginForm />
        </div>
        <div className="flex flex-col gap-6">
          <FormSpecialInputTypesDemo />
          <FormTextareaDemo />
          <FormSelectDemo />
          <ProfileSettingsForm />
          <FormFieldGroupOutlineDemo />
          <SurveyForm />
          <SignupForm />
        </div>
        <div className="flex flex-col gap-6">
          <FormRadioDemo />
          <FormCheckboxDemo />
          <FormSliderDemo />
          <NewsletterForm />
          <PaymentForm />
          <ContactForm />
          <ComplexFormDemo />
          <ComplexFormInvalidDemo />
        </div>
        <div className="flex flex-col gap-6">
          <CheckoutForm />
          <FormSwitchDemo />
          <FormToggleGroupDemo />
          <FormOTPDemo />
          <FormFieldSetDemo />
          <FormFieldSeparatorDemo />
          <FinderPreferencesForm />
        </div>
        <div className="flex flex-col gap-6"></div>
      </div>
    </div>
  )
}