novixuiv0.1
Install

Components · v0.1 · Stable

Label

The text tag for form controls. Uses Radix Label so click and screen-reader semantics are correct, with typography tuned for high-density forms.

Example

A label wired to an input via htmlFor.

Installation

Install and import.

tsx
npx @novix-ui/cli add label
tsx
import { Label } from "@novix-ui/react";

When to use

Use it for

  • Every visible form input, always
  • Checkbox and radio row labels
  • Setting rows with a name and description

Skip it when

  • The control has a visible label already (e.g. Button copy)
  • Hidden labels are acceptable — use sr-only

Playground

Playground

md
default

Required & optional

Tones

API

Prop
Type
Default
Description
  • htmlFor
    string
    —
    Associates the label with a control by id.
  • size
    "sm" | "md" | "lg"
    "md"
    Text size.
  • tone
    "default" | "muted" | "invalid"
    "default"
    Color intent, e.g. red for validation.
  • required
    boolean
    —
    Renders a red asterisk with sr-only 'required'.
  • optional
    boolean
    —
    Renders a subtle '(optional)' hint.

Accessibility

  • Uses Radix Label so clicking anywhere focuses the associated control.
  • The required asterisk includes a visually hidden "required" for screen readers.
  • Set tone="invalid" alongside aria-invalid on the input.

Design guidelines

One indicator, not both

A form is 'mostly required, optional marked' or 'mostly optional, required marked'. Pick one to reduce noise.

Nouns, not sentences

'Email' beats 'What's your email address?'. Save context for the hint text.

Sentence case

'Workspace name', not 'Workspace Name'. Titles feel bureaucratic in forms.

Common mistakes

  • Missing htmlFor. The click-to-focus behavior only works with a matching id.
  • Using placeholder text as a label. Every user with reduced vision or a screen reader loses the field's meaning.