Basic Components

Label

Displays text with various styling options for categorization, status indicators, or highlighting important information. Labels can be styled with different colors, sizes, and variants.

Source Edit this page

Renders a <label> for form controls. Pairs with Input and Checkbox to provide accessible field labels, with size automatically propagating to nested form elements.

When to Use

Labelling text inputs, password fields, and other Input controls.
Wrapping a Checkbox so the label text becomes part of the click target.
Marking required fields, validation status, or hint text alongside a control.
Use htmlFor to associate a label with an external Input by id.

Basic Usage

A Label defaults to sm size and inherit appearance, so it picks up text color from its surroundings.

Email address

<Label>Email address</Label>

With Input

Wrap an Input inside a Label to make the label clickable and associate them implicitly — no htmlFor/id wiring required.

<Col noGap>
  <Label>
    Email
    <Input placeholder="you@example.com" />
  </Label>
</Col>

With Checkbox

Place a Checkbox inside a Label so the label text expands the toggle's hit area.

Subscribe to product updates

<Label>
  <Checkbox />
  Subscribe to product updates
</Label>

htmlFor Association

When the control lives outside the label, use the standard htmlFor attribute pointing at the input's id.

Username

<Col noGap>
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="Choose a username" />
</Col>

Sizes

Labels come in five sizes — xs, sm (default), md, lg, xl. Nested Input and Checkbox controls inherit the size.

xs label sm label (default) md label lg label xl label

<Col>
  <Label xs>xs label <Input placeholder="xs input" /></Label>
  <Label>sm label (default) <Input placeholder="sm input" /></Label>
  <Label md>md label <Input placeholder="md input" /></Label>
  <Label lg>lg label <Input placeholder="lg input" /></Label>
  <Label xl>xl label <Input placeholder="xl input" /></Label>
</Col>

Appearances

Labels default to inherit — they take their color from the surrounding text. Set an explicit appearance to override.

inherit label (default)primary labelbrand labelaccent labelsecondary labeltertiary labelsuccess labeldanger labelwarning labelinfo labellink label

<Row flexWrap>
  <Label>inherit label (default)</Label>
  <Label primary>primary label</Label>
  <Label brand>brand label</Label>
  <Label accent>accent label</Label>
  <Label secondary>secondary label</Label>
  <Label tertiary>tertiary label</Label>
  <Label success>success label</Label>
  <Label danger>danger label</Label>
  <Label warning>warning label</Label>
  <Label info>info label</Label>
  <Label link>link label</Label>
</Row>

Font Weights

The default weight is medium. Override with any weight prop from thin to black.

thin weightextralight weightlight weightnormal weightmedium weight (default)semibold weightbold weightextrabold weightblack weight

<Col>
  <Label thin>thin weight</Label>
  <Label extralight>extralight weight</Label>
  <Label light>light weight</Label>
  <Label normal>normal weight</Label>
  <Label>medium weight (default)</Label>
  <Label semibold>semibold weight</Label>
  <Label bold>bold weight</Label>
  <Label extrabold>extrabold weight</Label>
  <Label black>black weight</Label>
</Col>

Text Decorations

Apply text decorations as needed.

underline textlineThrough textoverline text

<Row flexWrap>
  <Label underline>underline text</Label>
  <Label lineThrough>lineThrough text</Label>
  <Label overline>overline text</Label>
</Row>

When an Input or Checkbox is nested inside a Label, it automatically picks up the label's size — set it once and everything scales together. Pass a size on the child to opt out for that one element.

Extra-large checkbox optionExplicit xs checkbox overrides the lg label

<Col>
  <Label xl>
    <Checkbox />
    Extra-large checkbox option
  </Label>
  <Label lg>
    <Checkbox xs />
    Explicit <Code>xs</Code> checkbox overrides the <Code>lg</Code> label
  </Label>
</Col>

Required & Status

Use appearances to indicate field status — danger for errors, success for valid, secondary for hints.

Username *

Email verified

All fields marked with * are required.

<Col>
  <Col noGap>
    <Label semibold>Username <Label danger>*</Label></Label>
    <Input placeholder="Choose a username" />
  </Col>
  <Col noGap>
    <Label success semibold>Email verified</Label>
    <Input placeholder="verified@example.com" />
  </Col>
  <Label secondary>All fields marked with * are required.</Label>
</Col>

Label Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`flex1`	Flex		Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)
`flexAuto`	Flex		Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)
`flexNone`	Flex		Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)
`heading`	Font Family		Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)
`mono`	Font Family		Monospace font family
`sans`	Font Family	✓	Sans-serif font family (default)
`serif`	Font Family		Serif font family
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`black`	Font Weight		Black font weight (900)
`bold`	Font Weight		Bold font weight (700)
`extrabold`	Font Weight		Extra bold font weight (800)
`extralight`	Font Weight		Extra light font weight (200)
`light`	Font Weight		Light font weight (300)
`medium`	Font Weight	✓	Medium font weight (500)
`normal`	Font Weight		Normal font weight (400)
`semibold`	Font Weight		Semibold font weight (600)
`thin`	Font Weight		Thin font weight (100)
`noShrink`	Shrink		Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size		Medium size (default)
`sm`	Size	✓	Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left
`textRight`	Text Align		Align text to right
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove text decoration (no underline, strikethrough, etc.)
`overline`	Text Decoration		Add overline decoration above text
`underline`	Text Decoration		Add underline decoration below text
`capitalize`	Text Transform		Capitalize first letter of each word
`lowercase`	Text Transform		Transform text to lowercase
`normalCase`	Text Transform		Normal text case (no transformation)
`uppercase`	Text Transform		Transform text to uppercase
`lineClamp2`	Truncate		Truncate at 2 lines with ellipsis
`lineClamp3`	Truncate		Truncate at 3 lines with ellipsis
`lineClamp4`	Truncate		Truncate at 4 lines with ellipsis
`lineClamp5`	Truncate		Truncate at 5 lines with ellipsis
`noTruncate`	Truncate		Remove truncation
`truncate`	Truncate		Single line truncation with ellipsis
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border		Disable all borders
`cursorDefault`	Cursor	✓	Default cursor - standard arrow
`cursorMove`	Cursor		Move cursor - indicates draggable element
`cursorNone`	Cursor		No cursor - hides the cursor
`cursorNotAllowed`	Cursor		Not-allowed cursor - indicates disabled state
`cursorPointer`	Cursor		Pointer cursor - indicates clickable element
`cursorText`	Cursor		Text cursor - indicates selectable text
`cursorWait`	Cursor		Wait cursor - indicates loading/processing
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	✓	Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`column`	Flex Direction		Flex direction column (vertical)
`columnReverse`	Flex Direction		Flex direction column-reverse
`row`	Flex Direction		Flex direction row (horizontal)
`rowReverse`	Flex Direction		Flex direction row-reverse
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`reverse`	Reverse		Reverse the order of children
`noRing`	Ring		Disable focus ring
`ring`	Ring		Enable focus ring
`noShadow`	Shadow		Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint
`flexNoWrap`	Wrap		Force flex items to stay on single line (may overflow)
`flexWrap`	Wrap		Allow flex items to wrap to new lines when container is too narrow
`flexWrapReverse`	Wrap		Wrap flex items in reverse order (last items wrap first)

VaneUI