ToggleGroup

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

Installation

# Install @opencosmos/ui to use ToggleGroup
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

type— Allow single or multiple items to be selected

defaultValue— The default value of the item to select

Usage

Import

import { ToggleGroup } from '@opencosmos/ui';

Example

<ToggleGroup>
  Content
</ToggleGroup>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
type	single \| multiple	"single"	Allow single or multiple items to be selected
defaultValue	text	"left"	The default value of the item to select

Code Examples

Basic Usage

Toggle group with single selection

import { ToggleGroup, ToggleGroupItem } from "@opencosmos/ui"

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>