Label

Accessible field label with required-state support.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add label

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Label } from '@app/components/ui/label.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><div><Label htmlFor="demo-label">Order name</Label><input id="demo-label" /></div></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`LabelProps`	`children`	`Renderable`	No
`LabelProps`	`class`	`string`	Yes
`LabelProps`	`required`	`boolean`	Yes
`LabelProps`	`optional`	`boolean`	Yes
`LabelProps`	`optionalText`	`Renderable`	Yes
`LabelProps`	`variant`	`"default" \| "eyebrow"`	Yes
`LabelProps`	`state`	`"rest" \| "disabled" \| "invalid"`	Yes	Presentation only; the associated input owns disabled/invalid semantics.
`LabelProps`	`data-part`	`string`	Yes
`LabelProps`	`data-scope`	`string`	Yes
`LabelProps`	`srOnly`	`boolean`	Yes

TypeScript

LabelProps extends Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "class" | "children">

Keyboard

Key	Action
`Tab/Shift+Tab`	Move between associated controls; the label adds no focus target

Tokens

Semantic contract roles: destructive/text, text/fg, text/muted.

CSS custom properties referenced directly: --ns-destructive-text, --ns-fg, --ns-font-eyebrow, --ns-font-label, --ns-font-mono, --ns-font-sans, --ns-label-size, --ns-label-tracking, --ns-leading-caption, --ns-leading-label, --ns-leading-small, --ns-leading-strong, --ns-muted-fg, --ns-space-1, --ns-text-label, --ns-text-sm, --ns-text-small, --ns-text-strong, --ns-tracking-label, --ns-tracking-strong, --ns-type-label-strong-style, --ns-weight-eyebrow, --ns-weight-small, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: native label

Native DOM attributes pass through where the implementation accepts them.
Required wins over optional. srOnly preserves the native accessible label and suppresses its decorative required mark.

Design contract values marked planned are not implementation props. The props above describe what ships today.