Home Components Blocks Colors

Getting Started

Client Side Routing

Dark Mode

Components

Charts

Buttons

Button File Trigger Toggle

Colors

Color Area Color Field Color Picker Color Slider Color Swatch Picker Color Wheel

Controls

Command Context Menu Slider Switch Toolbar Keyboard

Date And Time

Calendar Date Field Range Calendar Date Picker Date Range Picker Time Field

Drag And Drop

Statuses

Badge Progress Meter Note / Alert Skeleton Toastalpha Sonner Indicator

Surfaces

Card Description List Separator Spoiler Code Header

Media

Carousel Avatar User

Navigation

Link Breadcrumbs Tabs Pagination Disclosure

Pickers

Select Combo Box Multi Selectbeta

Collections

Menu Grid List List Box Table Tag Group Tree

Layouts

Navbar Sidebar Container

Overlays

Modal Popover Sheet Tooltip Drawer

Forms

Form Text Field Number Field Search Field Textarea Checkbox Radio O T P

Switch

A switch allows a user to turn a setting on or off.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add switch

Basic

Preview

Code

Controlled

Preview

Code

HQ UI © 2025 - This UI design was crafted by Diqi Al-Haqqi

Special thanks for Intent UI by Irsyad A. Pandjaitan for inspiration

Default

Read Only

Disabled

Switchvalue: false

On this page

Installation
Basic
Controlled