Label
A form label. for wires it to its control, so clicking it focuses.
Walkthrough
1. Basic
Most omaris fields render their own label from a label prop. Reach for this one when you are labelling something that does not — a group of controls, or an element of your own.
<script lang="ts"> import { Label, Switch } from 'omaris';</script><div class="flex w-72 max-w-full flex-col gap-2"> <Label for="webhook">Webhook URL</Label> <input id="webhook" type="url" placeholder="https://example.com/hooks" class="h-10 rounded-lg border border-input bg-surface-container-lowest px-3 text-body-sm text-foreground outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/18" /> <Label required for="alerts">Alerts</Label> <Switch id="alerts" label="Email me when a deploy fails" /></div>2. States
required appends the asterisk and announces "required"; disabled dims the label to match a control that is out of play. Clicking either one still moves focus to the field it names.
<script lang="ts"> import { Label, Checkbox, Input } from 'omaris';</script><div class="flex w-72 max-w-full flex-col gap-4"> <div class="flex flex-col gap-1.5"> <Label required for="workspace">Workspace name</Label> <Input id="workspace" placeholder="acme-production" /> </div> <div class="flex flex-col gap-1.5"> <Label disabled for="region">Region</Label> <Input id="region" value="eu-west-1" disabled /> </div> <Label class="flex items-center gap-2"> <Checkbox /> Send me the weekly digest </Label></div>