ToggleGroup
The ToggleGroup component is a flexible UI element that enables users to switch between multiple options or states. It supports customization in terms of colors, sizes, and variants, making it adaptable to different design requirements.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import ToggleGroup from '@start-base/start-ui/ToggleGroup';Usages
Default Toggle Group
Default Destructive Toggle
Outline Style Toggle Group
Large Size Toggle Group
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| initialState | boolean | false | Initial state of the Toggle | |
| size | string | medium | large medium small | Size of the Toggle |
| variant | string | default | default outline | Variant of the Toggle |
| color | string | primary | primary secondary destructive | Color of the Toggle |
| value | string | Value of the Toggle | ||
| disabled | boolean | false | Disabled of the Toggle | |
| children | node | Children of the Toggle |