# Label

Accessible field label with required-state support.

[All components](https://rickylabs.github.io/netscript/design-system/components/) · [Theme builder](https://rickylabs.github.io/netscript/create/) · [Implementation source](https://github.com/rickylabs/netscript/blob/main/packages/fresh-ui/registry/components/ui/label.tsx)

## Live preview

[Open live label preview](https://rickylabs.github.io/netscript/assets/fresh-ui/preview/?component=label&theme=studio-utility)

## Install

```bash
netscript ui:add label
```

## Usage and examples

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

```tsx
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.