Skip to content
omaris

Inputs

Label

A form label. for wires it to its control, so clicking it focuses.

import { Label } from 'omaris'
Learn

Examples

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>

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>

When to use it

Use it for

  • A control that does not draw its own label: a raw <input>, an element of your own, a third-party widget. for wires it so a click focuses.
  • A row where the words are the click target. Wrap a Checkbox or a Switch in it and the whole line toggles.
  • A heading over a group of controls that share one question, when the group is not a RadioGroup.

Not for

  • A field with a label prop → Text Field, Textarea, Select, Combobox. The prop renders and wires this.
  • A section heading in a form → Text with variant="title-sm" and as="h3".
  • Help text under a field → the field's supportingText.
  • A tag on an item → Badge or Chip.

Do

  • Always give it a for, or put the control inside it. A label that focuses nothing is just a span.
  • Set required on the label and on the control. The asterisk is for the eye; the attribute is for the screen reader and the browser.
  • Set disabled to match the control, so the row dims as one thing.

Don't

  • Point two controls at one for. A label names one thing.
  • Use a placeholder instead. It is gone on the first keystroke.
  • Grow it into a heading with class. It merges last and wins, but the size is a field label's for a reason.
Pairs with Text Field Checkbox Switch Radio Text

API

Label

A form label. for wires it to its control, so clicking it focuses.

Most omaris fields take a label prop and render this themselves; reach for it directly when you are labelling something that doesn't.

import { Label } from 'omaris'

Props

required

Defaults to false

boolean

Appends a *, announced as "required" by screen readers.

disabled

Defaults to false

boolean
class
string
children
Snippet