Toggle

A two-state button that can be either on or off, typically used for enabling/disabling features.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/toggle/toggle.tsx

import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui'
import { Toggle as TogglePrimitive } from 'radix-ui'
import * as React from 'react'
import { toggleStyles } from './toggle.css'
 
const Toggle = React.forwardRef<
  React.ComponentRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>
>(({ className, ...props }, forwardedRef) => {
  const styles = toggleStyles()
  return (
    <TogglePrimitive.Root ref={forwardedRef} className={styles.base({ className })} {...props} />
  )
})
 
const ToggleGroup = React.forwardRef<
  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
>(({ className, ...props }, forwardedRef) => {
  const styles = toggleStyles()
  return (
    <ToggleGroupPrimitive.Root
      ref={forwardedRef}
      className={styles.group({ className })}
      {...props}
    />
  )
})
 
const ToggleGroupItem = React.forwardRef<
  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
>(({ className, ...props }, forwardedRef) => {
  const styles = toggleStyles()
  return (
    <ToggleGroupPrimitive.Item
      ref={forwardedRef}
      className={styles.base({ className })}
      {...props}
    />
  )
})
 
Toggle.displayName = TogglePrimitive.Root.displayName
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
 
export { Toggle, ToggleGroup, ToggleGroupItem }

Usage

Imports

import { Toggle, ToggleGroup, ToggleGroupItem } from '#/components/toggle'

Example

Browse the Storybook for more examples.

Anatomy

<ToggleGroup>
  <ToggleGroupItem />
</ToggleGroup>

On this page