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

Label

How the Label works with a keyboard and assistive tech.

OverviewPlaygroundAccessibility

Guidance#

A <label> tied to its field: clicking it focuses the field, and it gives the field its name.

The asterisk is backed by the required attribute on the field.

The help line is linked to the field with aria-describedby.

PreviousInputNextDropdown

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