V Vultra UI

Label

A form label that associates with inputs for accessibility. Built on bits-ui label primitive.

Preview

<script>
  import { Label } from '@vultra/ui';
  import { Input } from '@vultra/ui';
</script>

<div class="flex w-72 flex-col gap-2">
  <Label for="email">Email</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>

With Checkbox

<script>
  import { Label } from '@vultra/ui';
  import { Checkbox } from '@vultra/ui';
</script>

<div class="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

Disabled State

<script>
  import { Label } from '@vultra/ui';
  import { Input } from '@vultra/ui';
</script>

<div class="flex w-72 flex-col gap-2">
  <Label for="disabled-input">Disabled</Label>
  <Input id="disabled-input" disabled value="Read only" />
</div>

Props

PropTypeDefaultDescription
forstring—ID of the associated form control
classstring—Additional classes

All other props are forwarded to the underlying <label> element.

Accessibility

  • Renders a <label> element that associates with form controls via for attribute.
  • Automatically reduces opacity when the associated input is disabled (peer-disabled:opacity-50).
  • Uses select-none to prevent accidental text selection when clicking.
  • font-medium provides visual weight for form readability.
  • Supports group-data-[disabled=true] for group-level disabled states.

Install

npx @vultra/cli add label