Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Label

Form label with required indicator, optional description text, and tooltip slot. Pairs with any input component via the `for` attribute.

Components Label
input static
<arc-label>

Overview

Label provides a styled, accessible label for form controls. It renders a `<label>` element that can target any input via the `for` prop, clicking the label to focus the associated control just like native HTML. The `required` prop appends a red asterisk next to the label text, signaling to users that the field is mandatory. A `description` slot renders smaller muted helper text below the label, useful for explaining expected formats or constraints without cluttering the label itself. A `tooltip` slot lets you place an info icon or tooltip trigger inline with the label. Three sizes (sm, md, lg) control the font size, and the disabled state reduces opacity and blocks pointer events, visually syncing with a disabled input below it.

Guidelines

When to use

  • Always pair a label with its input — every form control needs an accessible label
  • Set the `for` prop to match the target input's `id` attribute
  • Use the description slot for format hints like "MM/DD/YYYY" or character limits
  • Use the required indicator to clearly mark mandatory fields

When not to use

  • Do not use Label as standalone text — it is a form element, not a heading or paragraph
  • Do not hide labels visually while keeping them only for screen readers — visible labels help all users
  • Do not put interactive elements inside the label text — use the tooltip slot instead

Features

  • Native `<label>` element with `for` attribute for accessible input association
  • Required indicator (red asterisk) via the `required` prop
  • Description slot for helper text below the label
  • Tooltip slot for inline info icons or tooltip triggers
  • Three size presets: sm, md, lg
  • Disabled state with reduced opacity
  • Click-to-focus behavior matching native label semantics
  • Exposed CSS parts: label, description

Preview

Full name
Email address We'll never share your email.

Usage

<arc-label for="username" required>Username</arc-label>
<arc-input id="username" placeholder="Enter username"></arc-input>

<arc-label for="bio">
  Bio
  <span slot="description">Keep it under 160 characters.</span>
</arc-label>
<arc-textarea id="bio"></arc-textarea>
 
import { Label, Input, Textarea } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Label for="username" required>Username</Label>
      <Input id="username" placeholder="Enter username" />

      <Label for="bio">
        Bio
        <span slot="description">Keep it under 160 characters.</span>
      </Label>
      <Textarea id="bio" />
    </>
  );
}
 
<script setup>
import { Label, Input, Textarea } from '@arclux/arc-ui-vue';
</script>

<template>
  <Label for="username" required>Username</Label>
  <Input id="username" placeholder="Enter username" />

  <Label for="bio">
    Bio
    <template #description>Keep it under 160 characters.</template>
  </Label>
  <Textarea id="bio" />
</template>
 
<script>
  import { Label, Input, Textarea } from '@arclux/arc-ui-svelte';
</script>

<Label for="username" required>Username</Label>
<Input id="username" placeholder="Enter username" />

<Label for="bio">
  Bio
  <span slot="description">Keep it under 160 characters.</span>
</Label>
<Textarea id="bio" />
 
import { Component } from '@angular/core';
import { Label, Input, Textarea } from '@arclux/arc-ui-angular';

@Component({
  imports: [Label, Input, Textarea],
  template: `
    <arc-label for="username" required>Username</arc-label>
    <arc-input id="username" placeholder="Enter username" />
  `,
})
export class FormComponent {}
 
import { Label, Input } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Label for="username" required>Username</Label>
      <Input id="username" placeholder="Enter username" />
    </>
  );
}
 
import { Label, Input } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Label for="username" required>Username</Label>
      <Input id="username" placeholder="Enter username" />
    </>
  );
}
 
<!-- Use native <label> with matching for/id attributes -->
<label class="arc-label" for="username">
  Username <span style="color: #ef4444; font-weight: 700;">*</span>
</label>
<input id="username" placeholder="Enter username" />
 
<!-- Use native <label> with inline styles -->
<label for="username" style="display: block; font-size: 14px; font-weight: 600; color: rgb(160, 160, 176); margin-bottom: 4px;">
  Username <span style="color: #ef4444; font-weight: 700;">*</span>
</label>
<input id="username" placeholder="Enter username" />

API

for string ''
ID of the target input element. Clicking the label focuses the associated control.
required boolean false
Shows a red asterisk (*) after the label text.
size 'sm' | 'md' | 'lg' 'md'
Controls the label font size.
disabled boolean false
Reduces opacity and blocks pointer events.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy