ui Architecture Docs
Home / File/ switch-example.tsx — ui Source File

switch-example.tsx — ui Source File

Architecture documentation for switch-example.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 4 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  1e57b81b_a053_b9d5_34f5_07ff10e7a928["switch-example.tsx"]
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  1e57b81b_a053_b9d5_34f5_07ff10e7a928 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  1e57b81b_a053_b9d5_34f5_07ff10e7a928 --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  e283b120_3e25_931b_59db_7a7787678698["label"]
  1e57b81b_a053_b9d5_34f5_07ff10e7a928 --> e283b120_3e25_931b_59db_7a7787678698
  11cedc73_2e2c_66fa_2bcf_7040d38951fa["switch"]
  1e57b81b_a053_b9d5_34f5_07ff10e7a928 --> 11cedc73_2e2c_66fa_2bcf_7040d38951fa
  style 1e57b81b_a053_b9d5_34f5_07ff10e7a928 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/registry/bases/radix/ui/field"
import { Label } from "@/registry/bases/radix/ui/label"
import { Switch } from "@/registry/bases/radix/ui/switch"

export default function SwitchExample() {
  return (
    <ExampleWrapper>
      <SwitchBasic />
      <SwitchWithDescription />
      <SwitchDisabled />
      <SwitchSizes />
    </ExampleWrapper>
  )
}

function SwitchBasic() {
  return (
    <Example title="Basic">
      <Field orientation="horizontal">
        <Switch id="switch-basic" />
        <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>
      </Field>
    </Example>
  )
}

function SwitchWithLabel() {
  return (
    <Example title="With Label">
      <div className="flex items-center gap-2">
        <Switch id="switch-bluetooth" defaultChecked />
        <Label htmlFor="switch-bluetooth">Bluetooth</Label>
      </div>
    </Example>
  )
}

function SwitchWithDescription() {
  return (
    <Example title="With Description">
      <FieldLabel htmlFor="switch-focus-mode">
        <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-focus-mode" />
        </Field>
      </FieldLabel>
    </Example>
  )
}

function SwitchDisabled() {
  return (
    <Example title="Disabled">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-unchecked" disabled />
          <Label htmlFor="switch-disabled-unchecked">
            Disabled (Unchecked)
          </Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-checked" defaultChecked disabled />
          <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>
        </div>
      </div>
    </Example>
  )
}

function SwitchSizes() {
  return (
    <Example title="Sizes">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-size-sm" size="sm" />
          <Label htmlFor="switch-size-sm">Small</Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-size-default" size="default" />
          <Label htmlFor="switch-size-default">Default</Label>
        </div>
      </div>
    </Example>
  )
}

Domain

Subdomains

Functions

Dependencies

  • example
  • field
  • label
  • switch

Source

Frequently Asked Questions

What does switch-example.tsx do?
switch-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in switch-example.tsx?
switch-example.tsx defines 6 function(s): SwitchBasic, SwitchDisabled, SwitchExample, SwitchSizes, SwitchWithDescription, SwitchWithLabel.
What does switch-example.tsx depend on?
switch-example.tsx imports 4 module(s): example, field, label, switch.
Where is switch-example.tsx in the architecture?
switch-example.tsx is located at apps/v4/registry/bases/radix/examples/switch-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free