FormSwitchDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormSwitchDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormSwitchDemo() {
  const [notifications, setNotifications] = useState(false)
  const [marketing, setMarketing] = useState(true)

  return (
    <Card>
      <CardHeader>
        <CardTitle>Switch Fields</CardTitle>
        <CardDescription>Different switch field configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="airplane-mode-c10">Airplane Mode</FieldLabel>
              <FieldDescription>
                Turn on airplane mode to disable all connections.
              </FieldDescription>
            </FieldContent>
            <Switch id="airplane-mode-c10" />
          </Field>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor="notifications-rfq">
                Push Notifications
              </FieldLabel>
              <FieldDescription>
                Receive notifications about updates and new features.
              </FieldDescription>
            </FieldContent>
            <Switch
              id="notifications-rfq"
              checked={notifications}
              onCheckedChange={setNotifications}
            />
          </Field>
          <Field orientation="horizontal">
            <Switch
              id="marketing-7o6"
              checked={marketing}
              onCheckedChange={setMarketing}
              className="mt-0.5"
            />
            <FieldContent>
              <FieldLabel htmlFor="marketing-7o6">Marketing Emails</FieldLabel>
              <FieldDescription>
                Receive emails about new products, features, and more.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Switch id="auto-save-eux" defaultChecked />
            <FieldContent>
              <FieldLabel htmlFor="auto-save-eux">Auto-save</FieldLabel>
              <FieldDescription>
                Automatically save your work every 5 minutes.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field>
            <FieldLabel>Privacy Settings</FieldLabel>
            <FieldDescription>
              Manage your privacy preferences.
            </FieldDescription>
            <Field orientation="horizontal">
              <Switch id="profile-visible-zaq" defaultChecked />
              <FieldContent>
                <FieldLabel
                  htmlFor="profile-visible-zaq"
                  className="font-normal"
                >
                  Make profile visible to others
                </FieldLabel>
              </FieldContent>
            </Field>
            <Field orientation="horizontal">
              <Switch id="show-email-x90" />
              <FieldContent>
                <FieldLabel htmlFor="show-email-x90" className="font-normal">
                  Show email on profile
                </FieldLabel>