Orvain UI
Orvain UI
HomeBlocksAI toolsFigmaPricing
FAQBlogsContact usAbout us
Docs
Sign InGet the Figma
Free componentsFREEBlocksPROCode library + MCPSOONFigma filePRO

Getting started

Introduction
What's available

Foundations

Color
Typography

Guides

Editor and MCP

Components

Overview
Actions
ButtonLink ButtonGhost ButtonFancy ButtonCompact ButtonButton Group
Displaying Data
AvatarsAvatar GroupAvatar Compact GroupBadgesTagFancy TagData TableContent LabelContent DividerKBDLine Progress BarCircular Progress BarRating
Feedback
Alert & NotificationTooltipBanner
Form
CheckboxRadioColor PickerDate PickerOTP InputFile UploadHintInputLabelDropdownSliderSwitchText Area
Layout
AccordionBreadcrumbSegmented ControlTab Menu HorizontalTab Menu Vertical
Navigation
Dot StepperPaginationNavbar
Overlays
Command MenuModalPopover
Form

Switch

How the Switch works with a keyboard and assistive tech.

OverviewPlaygroundAccessibility

Guidance#

A <button role="switch"> with aria-checked; Space or Enter flips it.

The label row and card name the switch with aria-labelledby, so it is announced as Dark mode, switch, on.

The small sizes keep a 24px hit area around the drawn track.

PreviousSliderNextText Area

On this page

Guidance
Documentation

On this page

Guidance
Free componentsFREEBlocksPROCode library + MCPSOONFigma filePRO

Getting started

Introduction
What's available

Foundations

Color
Typography

Guides

Editor and MCP

Components

Overview
Actions
ButtonLink ButtonGhost ButtonFancy ButtonCompact ButtonButton Group
Displaying Data
AvatarsAvatar GroupAvatar Compact GroupBadgesTagFancy TagData TableContent LabelContent DividerKBDLine Progress BarCircular Progress BarRating
Feedback
Alert & NotificationTooltipBanner
Form
CheckboxRadioColor PickerDate PickerOTP InputFile UploadHintInputLabelDropdownSliderSwitchText Area
Layout
AccordionBreadcrumbSegmented ControlTab Menu HorizontalTab Menu Vertical
Navigation
Dot StepperPaginationNavbar
Overlays
Command MenuModalPopover