Toggle group with motion

Blocks Templates Patterns New Themes Changelog

Login Get full access

Blueprint
Toggle group
With motion

/

Avatar

Basic Fallback Group Initials Size Square

Badge

Basic Danger Info Outline Secondary Success Warning With border With icon With link With solid background

Bar list

Basic Controlled With card With link

Breadcrumbs

Basic Slash separator With icon With menu

Button

Button with icon Circle Custom background Custom design Danger Disabled Info Inline alert Large Outline Plain Primary Secondary Small Square State Subtle danger Subtle info Subtle primary Subtle success Subtle warning Subtle with icon Success Warning

Button group

Basic Disabled Vertical With icon With menu With text

Checkbox

Basic Controlled Custom background Default selected Disabled Invalid Readonly Uncontrolled With checkbox group With description With fieldset

Choice box

Multiple choice Single choice With card With default selected With gap With gap columns With icon With link With modal With sheet

Combo box

Basic Controlled Disabled Invalid Readonly Uncontrolled With avatar With avatar and description With description With description on item With fieldset With icons With label

Date field

Basic Controlled Uncontrolled Validation With description With fieldset With label

Date picker

Basic Controlled Disabled Readonly Uncontrolled Validation With description With fieldset With time

Date range picker

Basic Disabled Readonly With fieldset

Description list

Basic Full width with card Full width with modal Full width with sheet With badge With card With disclosure With modal With sheet

Detail line

Basic With badge With card

Details

Basic With badge With icon With link With modal With sheet With text

Disclosure group

Basic Controlled Custom style Disabled Inside modal Inside sheet Multiple expanded Nested With form

Fieldset

Basic Disabled With card With custom layout With field group With grid layout With legend With text

File trigger

Controlled With drop zone

Grid list

Basic Controlled Disabled Drag between grid Draggable Multiple selection Regular list Single selection With avatar With link With menu With section Without selection

Heading

Level 1 Level 2 Level 3 Level 4 With actions

Input otp

Controlled Disabled Only letters Only numbers Pin Validation With pattern With separator With timer

Keyboard

Basic Custom background With button With input group With menu With toggle

Link

Basic Custom style Text link With button style With text

Menu

Arrow Basic Blur overlay Danger item Disabled item For user Multiple Multiple user On action Open modal Placement Section level section Warning item With avatar With avatar and description With avatar trigger With description With link With search With section With shortcut With sticky header With submenu With table

Meter

Basic Full With description With value label props

Modal

Alert dialog Basic Controlled Custom style 1 Custom style 2 Custom style 3 Custom style 4 Dialog Fullscreen Nested With checkbox With form submit With switch

Note

Basic Danger Info Inside toast Success Warning

Number field

Basic Compact Controlled Currency Disabled Percent Units With description With field error With fieldset With label With link after label

Password field

Basic With anonation

Popover

Arrow Basic Nested Placement With avatar trigger With description list With detail line With details With form With grid list With tabs Without body

Progress bar

Basic Controlled With description

Radio

Basic Custom background Disabled Invalid With checkbox With description With fieldset

Search field

Basic Controlled Disabled Readonly Uncontrolled With custom input With description With keyboard With label

Select

Basic Controlled Disabled Invalid Multiple Uncontrolled With avatar With avatar and description With description With description on item With fieldset With icons With label

Switch

Basic Controlled Custom background Default selected Disabled Readonly Uncontrolled With description With fieldset

Table

Basic Bulk actions Draggable Full width with card Full width with modal Grid Sortable Stripped With action With columns selection With menu actions With pagination With search With tanstack table

Tag field

Basic Controlled input Disabled Invalid tag input Readonly Uncontrolled input

Tag group

Allow remove Controlled selection Default selected Disabled selection Link Multiple selection Single selection With fieldset

Text

Basic With badge With fieldset With input group With link

Text field

Basic Controlled Disabled Readonly Uncontrolled Validation with zod With button With description With field error With fieldset With input group With label With link after label With native select

Time field

Basic Controlled Uncontrolled Validation With description With fieldset With label

Toggle

Basic Controlled Outline Size Square size Uncontrolled

Toggle group

Basic Controlled Custom background Multiple Size Square size Subtle danger Subtle info Subtle primary Subtle success Subtle warning Uncontrolled With motion

Tooltip

Basic Bigger Full rounded Inverse No delay Placement With pressable Without arrow

Tree

Basic Controlled Default expanded Disabled Disabled selection Draggable Multiple On action With icons

With motion