Label
Renders an accessible label associated with controls.
vue
vue
<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.
sh
sh
$ npm add @oku-ui/primitives
Anatomy
Import the component.
vue
vue
<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.