Label

Label is the semantic label primitive for form fields.

Overview

Label has a minimal local styling contract. It mostly inherits typography from Text and only adds display: inline-block.

Public CSS Variables

There are no dedicated public --label-* component-local variables for Label.

The component inherits the Text token model, including:

Work email

Variable	Value	Affects
base label font family`Text` foundation		No visible change in this state
readable label colorinherited text color		No visible change in this state
label size mappingsize scale	—	—
label line-height mappingsize scale	—	—

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

Label itself only sets display: inline-block. Typography comes from Text.

State And Variant Interaction

visual sizing is inherited from the text-size data attributes
no dedicated disabled or error styling is defined on the label root
disabled presentation usually comes from surrounding layout or the associated control

Examples

Sizes

size maps to the text scale: sm, md and lg pair with the field sizes of the same name.

LTRRTL

label-sizes.tsx · 21 lines

import { Label, TextField, TextFieldInput } from '@vega-ui/react';
import { useId } from 'react';

const SIZES = ['sm', 'md', 'lg'] as const;

export default function LabelSizes() {
  const id = useId();

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-8)', width: '100%' }}>
      {SIZES.map((size) => (
        <div key={size} style={{ display: 'grid', gap: 'var(--spacing-3)' }}>

Do Not Override

removing the native label element semantics
styling labels so lightly that they become indistinguishable from helper text