ToggleGroupDateRange() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ToggleGroupDateRange() — ui Function Reference

Dependency Diagram

graph TD
  14ffa37b_826a_27ee_b311_63ec85222d83["ToggleGroupDateRange()"]
  7cfec362_e6dc_17ef_efcb_b8f12bc65346["toggle-group-example.tsx"]
  14ffa37b_826a_27ee_b311_63ec85222d83 -->|defined in| 7cfec362_e6dc_17ef_efcb_b8f12bc65346
  style 14ffa37b_826a_27ee_b311_63ec85222d83 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/toggle-group-example.tsx lines 273–297

function ToggleGroupDateRange() {
  return (
    <Example title="Date Range">
      <ToggleGroup
        defaultValue={["today"]}
        variant="outline"
        size="sm"
        spacing={2}
      >
        <ToggleGroupItem value="today" aria-label="Today">
          Today
        </ToggleGroupItem>
        <ToggleGroupItem value="week" aria-label="This Week">
          This Week
        </ToggleGroupItem>
        <ToggleGroupItem value="month" aria-label="This Month">
          This Month
        </ToggleGroupItem>
        <ToggleGroupItem value="year" aria-label="This Year">
          This Year
        </ToggleGroupItem>
      </ToggleGroup>
    </Example>
  )
}