edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Toggle Group

Premium solid toggle group with exclusive or multi-select state.

Componentsdocsbase-ui/toggle-group

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/toggle-group.json

Manual

API Reference

Root

Groups toggle buttons where one or more can be activated. Renders a div element.

defaultValueany[]
=[]

Initially active values

valueany[]

Controlled active values

onValueChangefunction

Called when value changes

toggleMultipleboolean
=false

Allow multiple active

disabledboolean
=false

Disable group

loopFocusboolean
=true

Loop keyboard focus

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item

A toggle button within the group. Renders a button element.

valueanyRequired

Toggle value

disabledboolean
=false

Disable toggle

nativeButtonboolean
=true

Render as native button

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Item data attributes
AttributeDescription
data-pressedPresent when toggle is active
data-disabledPresent when toggle is disabled