Label

Example

Installation

It lands in components/ui/label.tsx, with UISet’s root (uiset). Wrap your app in <UISet> once, and every component takes its skin.

What UISet adds

The component is UI SDK’s own, with its parts, props and names, so everything below works as UI SDK documents it. UISet adds the look and checks it:

• Styles in five skins, each in light and dark, from CSS variables you can override.
• Text at 4.5:1 contrast and control edges and focus rings at 3:1, in every skin and theme, checked with axe in tests.
• Haptic cues on phones, and sound cues when you set sound on <UISet>.
• Examples that name every control, so agents can find it (see Agents below).

API Reference

Props are the same as below, as React props, along with a native label's htmlFor.

Label

• debug? (boolean): Logs every state change with its reason to the console, in development builds.

Accessibility

A native <label> names the element its for points at only when that element is labelable, like an input or a button. Label names any other control through aria-labelledby, unless the control has an aria-label or an aria-labelledby of its own, which win. Its press does what a native label's does: it checks a checkbox, a switch or a radio, focuses a group's checked radio, and focuses anything else. A press on a disabled control does nothing.

Tested Behavior

Every line below is an automated test.

• A label names a native input, and a press focuses it.
• A label names a radio group, and a press focuses its checked radio.
• A label for a slider names its thumb, and a press focuses it.
• A label around a checkbox names it, and a press toggles it.
• A press on the label of a disabled group moves no focus.
• A control its author names keeps that name.
• A label names a control that renders after it.
• A double click on a label doesn't select its text.

Runs in React, Vue and web components.

Agents

UI SDK’s agent bridge finds this component by its accessible name: give it a visible label or an aria-label, and an agent can read its state and call its actions without screenshots. Building with AI agents shows how to connect one.

[
  {
    "ref": "c8",
    "component": "input",
    "actions": [
      "setValue",
      "clear"
    ],
    "label": "Work email",
    "value": ""
  }
]