Toggle Group

A group of buttons that can be toggled on or off.

Option 1

Option 2

Option 3

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>
      <ToggleGroup.Item icon={null} value="352719db">
        Option 1
      </ToggleGroup.Item>
      <ToggleGroup.Item icon={null} value="a7018e70">
        Option 2
      </ToggleGroup.Item>
      <ToggleGroup.Item icon={null} value="23d47d56">
        Option 3
      </ToggleGroup.Item>
    </ToggleGroup>
  );
}

export default ToggleGroupExample;

Props

Toggle Group

Item

Prop

Type

Default

Additional info

children

React.ReactNode

—

This is a Radix Toggle Group Root component. Find its full list of properties by visiting their docs.

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.


View code