FormToggleGroupDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormToggleGroupDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormToggleGroupDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Toggle Group Fields</CardTitle>
        <CardDescription>Different toggle group configurations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel>View Mode</FieldLabel>
            <ToggleGroup
              type="single"
              defaultValue="grid"
              variant="outline"
              className="w-full"
            >
              <ToggleGroupItem value="list" className="flex-1">
                List
              </ToggleGroupItem>
              <ToggleGroupItem value="grid" className="flex-1">
                Grid
              </ToggleGroupItem>
              <ToggleGroupItem value="cards" className="flex-1">
                Cards
              </ToggleGroupItem>
            </ToggleGroup>
          </Field>
          <Field>
            <FieldLabel>Status Filter</FieldLabel>
            <ToggleGroup type="single" variant="outline" className="flex-wrap">
              <ToggleGroupItem value="active">Active</ToggleGroupItem>
              <ToggleGroupItem value="pending">Pending</ToggleGroupItem>
              <ToggleGroupItem value="completed">Completed</ToggleGroupItem>
            </ToggleGroup>
            <FieldDescription>Filter by multiple statuses.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel>Subscription Plan</FieldLabel>
            <FieldDescription>
              Select the subscription plan that you want to subscribe to.
            </FieldDescription>
            <ToggleGroup type="single" variant="outline" className="flex-wrap">
              <ToggleGroupItem value="basic">Basic</ToggleGroupItem>
              <ToggleGroupItem value="pro">Pro</ToggleGroupItem>
              <ToggleGroupItem value="enterprise">Enterprise</ToggleGroupItem>
            </ToggleGroup>
          </Field>
          <Field>
            <FieldLabel>Disabled Toggle Group</FieldLabel>
            <ToggleGroup type="single" disabled variant="outline">
              <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
              <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
              <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
            </ToggleGroup>
            <FieldDescription>This toggle group is disabled.</FieldDescription>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}