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

forstring='': ID of the target input element. Clicking the label focuses the associated control.
requiredboolean=false: Shows a red asterisk (*) after the label text.
size'sm' | 'md' | 'lg'='md': Controls the label font size.
disabledboolean=false: Reduces opacity and blocks pointer events.

Label

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight