Label — ARC UI

Components

Label

input

static

<arc-label>

Overview

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

Use Label as standalone text — it is a form element, not a heading or paragraph
Hide labels visually while keeping them only for screen readers — visible labels help all users
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';

<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: `
    <Label for="username" required>Username</Label>
    <Input id="username" placeholder="Enter username" />
  `,
})
export class FormComponent {}

import { Label, Input } from '@arclux/arc-ui-solid';

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

import { Label, Input } from '@arclux/arc-ui-preact';

<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

Prop	Type	Default	Description
`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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight