FormCheckboxDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormCheckboxDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormCheckboxDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Checkbox Fields</CardTitle>
        <CardDescription>
          Different checkbox field configurations
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field orientation="horizontal">
            <Checkbox id="terms-y7h" />
            <FieldLabel htmlFor="terms-y7h" className="font-normal">
              I agree to the terms and conditions
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="newsletter-sw8" />
            <FieldContent>
              <FieldLabel htmlFor="newsletter-sw8">
                Subscribe to newsletter
              </FieldLabel>
              <FieldDescription>
                Receive weekly updates about new features and promotions.
              </FieldDescription>
            </FieldContent>
          </Field>
          <FieldSet>
            <FieldLegend>Preferences</FieldLegend>
            <FieldDescription>
              Select all that apply to customize your experience.
            </FieldDescription>
            <FieldGroup data-slot="checkbox-group">
              <Field orientation="horizontal">
                <Checkbox id="pref-dark-rfv" />
                <FieldLabel htmlFor="pref-dark-rfv" className="font-normal">
                  Dark mode
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="pref-compact-ti2" />
                <FieldLabel htmlFor="pref-compact-ti2" className="font-normal">
                  Compact view
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="pref-notifications-tut" />
                <FieldLabel
                  htmlFor="pref-notifications-tut"
                  className="font-normal"
                >
                  Enable notifications
                </FieldLabel>
              </Field>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldLegend>Skills</FieldLegend>
            <FieldGroup className="flex-row flex-wrap gap-3 *:data-[slot=field]:w-fit">
              <Field orientation="horizontal">
                <Checkbox id="javascript-4ee" />
                <FieldLabel htmlFor="javascript-4ee" className="font-normal">
                  JavaScript
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="typescript-cdv" />
                <FieldLabel htmlFor="typescript-cdv" className="font-normal">
                  TypeScript
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="react-qhm" />
                <FieldLabel htmlFor="react-qhm" className="font-normal">
                  React
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="nodejs-ug1" />
                <FieldLabel htmlFor="nodejs-ug1" className="font-normal">