ToggleGroupRtl() — ui Function Reference

Architecture documentation for the ToggleGroupRtl() function in toggle-group-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ToggleGroupRtl() — ui Function Reference

Dependency Diagram

graph TD
  55834852_bab9_2a05_8ffd_b5da4e3d962b["ToggleGroupRtl()"]
  79dfcd12_3d41_41e8_9984_50fd4ac8ac61["toggle-group-rtl.tsx"]
  55834852_bab9_2a05_8ffd_b5da4e3d962b -->|defined in| 79dfcd12_3d41_41e8_9984_50fd4ac8ac61
  style 55834852_bab9_2a05_8ffd_b5da4e3d962b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/toggle-group-rtl.tsx lines 41–57

export function ToggleGroupRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <ToggleGroup variant="outline" defaultValue={["list"]} dir={dir}>
      <ToggleGroupItem value="list" aria-label={t.list}>
        {t.list}
      </ToggleGroupItem>
      <ToggleGroupItem value="grid" aria-label={t.grid}>
        {t.grid}
      </ToggleGroupItem>
      <ToggleGroupItem value="cards" aria-label={t.cards}>
        {t.cards}
      </ToggleGroupItem>
    </ToggleGroup>
  )
}