Label

Renders an accessible label associated with controls.

First name

TailwindCSSCSS

<script setup lang="ts">
import { Label } from '@oku-ui/primitives'
</script>

<template>
  <div class="flex flex-wrap items-center gap-[15px] px-5">
    <Label
      class="text-[15px] font-semibold leading-[35px] text-white"
      for="firstName"
    > First name </Label>
    <input
      id="firstName"
      class="bg-blackA5 shadow-blackA9 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA9"
      type="text"
      value="Pedro Duarte"
    >
  </div>
</template>

Features

• Text selection is prevented when double clicking label.
• Supports nested controls.

Installation

Install the component from your command line.

$ npm add @oku-ui/primitives

Anatomy

Import the component.

<script setup>
import { Label } from '@oku-ui/primitives'
</script>

<template>
  <Label />
</template>

API Reference

Root

Contains the content for the label.

Prop	Default	Type
as	'div'	object | AsTag

Emit	Payload
mousedown	[event: MouseEvent]

Accessibility

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.