FormOrientationDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormOrientationDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormOrientationDemo() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle>Field Orientation Examples</CardTitle>
        <CardDescription>
          Demonstrating vertical, horizontal, and responsive orientations
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Vertical Orientation (Default)</FieldLegend>
            <FieldDescription>
              Label appears above the input - best for mobile and narrow layouts
            </FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="vertical-name">Full Name</FieldLabel>
                <Input id="vertical-name" placeholder="Enter your name" />
                <FieldDescription>
                  This field uses vertical orientation
                </FieldDescription>
              </Field>
              <Field>
                <FieldLabel htmlFor="vertical-select">Country</FieldLabel>
                <Select>
                  <SelectTrigger id="vertical-select">
                    <SelectValue placeholder="Select country" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="us">United States</SelectItem>
                    <SelectItem value="uk">United Kingdom</SelectItem>
                    <SelectItem value="ca">Canada</SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldLabel htmlFor="vertical-notifications">
                    Email Notifications
                  </FieldLabel>
                  <FieldDescription>
                    Receive product updates and news
                  </FieldDescription>
                </FieldContent>
                <Switch id="vertical-notifications" />
              </Field>
            </FieldGroup>
          </FieldSet>

          <FieldSeparator />

          <FieldSet>
            <FieldLegend>Horizontal Orientation</FieldLegend>
            <FieldDescription>
              Label appears to the left of the input - great for desktop forms
              with short labels
            </FieldDescription>
            <FieldGroup>
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldLabel htmlFor="horizontal-name">Name</FieldLabel>
                  <FieldDescription>Your display name</FieldDescription>
                </FieldContent>
                <Input id="horizontal-name" placeholder="Enter name" />
              </Field>
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldLabel htmlFor="horizontal-theme">Theme</FieldLabel>
                  <FieldDescription>
                    Choose your preferred theme
                  </FieldDescription>
                </FieldContent>
                <Select>
                  <SelectTrigger id="horizontal-theme">
                    <SelectValue placeholder="Select theme" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">Light</SelectItem>
                    <SelectItem value="dark">Dark</SelectItem>