SwitchChoiceCard() — ui Function Reference

Architecture documentation for the SwitchChoiceCard() function in switch-choice-card.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SwitchChoiceCard() — ui Function Reference

Dependency Diagram

graph TD
  838e0944_b944_810c_9c0a_9f29a40e60aa["SwitchChoiceCard()"]
  c8b927a2_57b0_f725_1a9a_7a751985472c["switch-choice-card.tsx"]
  838e0944_b944_810c_9c0a_9f29a40e60aa -->|defined in| c8b927a2_57b0_f725_1a9a_7a751985472c
  style 838e0944_b944_810c_9c0a_9f29a40e60aa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/switch-choice-card.tsx lines 11–39

export function SwitchChoiceCard() {
  return (
    <FieldGroup className="w-full max-w-sm">
      <FieldLabel htmlFor="switch-share">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Share across devices</FieldTitle>
            <FieldDescription>
              Focus is shared across devices, and turns off when you leave the
              app.
            </FieldDescription>
          </FieldContent>
          <Switch id="switch-share" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="switch-notifications">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Enable notifications</FieldTitle>
            <FieldDescription>
              Receive notifications when focus mode is enabled or disabled.
            </FieldDescription>
          </FieldContent>
          <Switch id="switch-notifications" defaultChecked />
        </Field>
      </FieldLabel>
    </FieldGroup>
  )
}