Toggle Group

A group of buttons that can be toggled on or off.
Properties
No properties to configure
Example
Source Code
Installation
"use client";

import React from "react";
import { ToggleGroup } from "@/subframe/components/ToggleGroup";

function ToggleGroupExample() {
  return (
    <ToggleGroup value="" onValueChange={(value: string) => {}}>
      <ToggleGroup.Item icon={null} value="9c189134">
        Option
      </ToggleGroup.Item>
      <ToggleGroup.Item icon={null} value="06d2ca3e">
        Option
      </ToggleGroup.Item>
      <ToggleGroup.Item icon={null} value="8df920e4">
        Option
      </ToggleGroup.Item>
    </ToggleGroup>
  );
}

export default ToggleGroupExample;

Props

Toggle Group
Item
Prop
Type
Default
Additional info
children
React.ReactNode
value
string
Currently selected value.
onValueChange
(value: string) => void
Handler called when a different option is selected.

Examples

Basics

Each item component needs a value prop to represent the value of the option. Use value and onValueChange props on the root component to control the selected state.

ToggleGroup uses Radix underneath the hood, but unlike Radix, this component can only have one selected value at a time.