Toggle Group

A set of two-state buttons that can be toggled on or off.

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup type="multiple" icon>
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Outline

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupOutlineDemo() {
  return (
    <ToggleGroup type="multiple" variant="outline">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Single

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupSingleDemo() {
  return (
    <ToggleGroup type="single">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Small

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupSmDemo() {
  return (
    <ToggleGroup type="single" size="sm">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Large

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupLgDemo() {
  return (
    <ToggleGroup type="multiple" size="lg">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Disabled

Preview

Bold

Code

import ToggleGroup from '@dinui/react/toggle-group'
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react'

export default function ToggleGroupDisabledDemo() {
  return (
    <ToggleGroup type="multiple" disabled>
      <ToggleGroup.Item value="bold" aria-label="Toggle bold" icon={false}>
        <ToggleGroup.Item.LeftIcon>
          <IconBold />
        </ToggleGroup.Item.LeftIcon>
        Bold
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <ToggleGroup.Item.Icon>
          <IconItalic />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
        <ToggleGroup.Item.Icon>
          <IconUnderline />
        </ToggleGroup.Item.Icon>
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add toggle-group

   yarn

   yarn dlx @dinui/cli@latest add toggle-group

   pnpm

   pnpm dlx @dinui/cli@latest add toggle-group

   bun

   bunx @dinui/cli@latest add toggle-group

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-toggle-group tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-toggle-group tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-toggle-group tailwind-variants type-fest

   bun

   bun add @radix-ui/react-toggle-group tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import Toggle, { toggle } from '@dinui/react/toggle'
   import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
   import { createContext, forwardRef, useContext } from 'react'
   import { tv, type VariantProps } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const toggleGroup = tv({
     slots: {
       group: 'flex items-center justify-center gap-1',
     },
   })
   
   type ToggleVariantProps = VariantProps<typeof toggle>
   
   const ToggleGroupContext = createContext<ToggleVariantProps>(toggle.defaultVariants)
   
   const ToggleGroupRoot = forwardRef<
     React.ElementRef<typeof ToggleGroupPrimitive.Root>,
     Merge<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, ToggleVariantProps>
   >(({ variant, icon, size, ...props }, ref) => {
     const variantProps = { variant, icon, size }
     const { group } = toggleGroup()
   
     return (
       <ToggleGroupContext.Provider value={variantProps}>
         <ToggleGroupPrimitive.Root
           {...props}
           ref={ref}
           className={group({ className: props.className })}
         />
       </ToggleGroupContext.Provider>
     )
   })
   ToggleGroupRoot.displayName = ToggleGroupPrimitive.Root.displayName
   
   const ToggleGroupItem = forwardRef<
     React.ElementRef<typeof ToggleGroupPrimitive.Item>,
     Merge<
       React.ComponentPropsWithoutRef<typeof Toggle>,
       React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
     >
   >(({ children, asChild, ...props }, ref) => {
     const variantProps = useContext(ToggleGroupContext)
   
     return (
       <ToggleGroupPrimitive.Item {...variantProps} {...props} ref={ref} asChild>
         <Toggle asChild={asChild}>{children}</Toggle>
       </ToggleGroupPrimitive.Item>
     )
   })
   ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
   
   const ToggleGroup = Object.assign(ToggleGroupRoot, {
     Item: Object.assign({ ...Toggle }, ToggleGroupItem),
   })
   
   export default ToggleGroup
   export { toggleGroup, toggle, ToggleGroupPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.