FormFieldGroupOutlineDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormFieldGroupOutlineDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormFieldGroupOutlineDemo() {
  return (
    <FieldGroup>
      <FieldSet>
        <FieldLegend>Notification Settings</FieldLegend>
        <FieldDescription>
          Configure how and when you receive notifications
        </FieldDescription>
        <FieldGroup>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="outline-demo-8h3-email-notif-vk0">
                Email Notifications
              </FieldLabel>
              <FieldDescription>
                Receive updates via email about your account activity
              </FieldDescription>
            </FieldContent>
            <Switch id="outline-demo-8h3-email-notif-vk0" defaultChecked />
          </Field>
          <FieldSeparator />
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="outline-demo-8h3-push-notif-5m7">
                Push Notifications
              </FieldLabel>
              <FieldDescription>
                Get instant notifications on your device
              </FieldDescription>
            </FieldContent>
            <Switch id="outline-demo-8h3-push-notif-5m7" defaultChecked />
          </Field>
          <FieldSeparator />
          <Field orientation="horizontal">
            <Switch id="outline-demo-8h3-sms-notif-ew4" />
            <FieldContent>
              <FieldLabel htmlFor="outline-demo-8h3-sms-notif-ew4">
                SMS Notifications
              </FieldLabel>
              <FieldDescription>
                Receive text messages for important updates
              </FieldDescription>
            </FieldContent>
          </Field>
          <FieldSeparator />
          <Field orientation="horizontal">
            <Switch id="outline-demo-8h3-weekly-digest-xor" defaultChecked />
            <FieldContent>
              <FieldLabel htmlFor="outline-demo-8h3-weekly-digest-xor">
                Weekly Digest
              </FieldLabel>
              <FieldDescription>
                Get a summary of your activity every week
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSet>
        <FieldLegend>Privacy Settings</FieldLegend>
        <FieldDescription>
          Control your privacy and data sharing preferences
        </FieldDescription>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="contact-3k2-firstName-q1r">
              First Name
            </FieldLabel>
            <Input id="contact-3k2-firstName-q1r" placeholder="John" required />
          </Field>
          <FieldSet>
            <FieldLegend variant="label">
              Show these items on the desktop:
            </FieldLegend>
            <FieldDescription>
              Select the items you want to show on the desktop.
            </FieldDescription>
            <FieldGroup className="gap-3">
              <Field orientation="horizontal">
                <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
                <FieldLabel