<script setup lang="ts">
import { Label } from 'akar';
import './styles.css';
</script>
<template>
<div class="akar-demo akar-demo-Label">
<div :style="{ display: 'flex', padding: '0 20px', flexWrap: 'wrap', gap: 15, alignItems: 'center' }">
<Label
class="LabelRoot"
for="firstName"
> First name </Label>
<input
id="firstName"
class="Input"
type="text"
value="Pedro Duarte"
>
</div>
</div>
</template>@import '../_colors/black-alpha.css';
@scope (.akar-demo-Label) {
/* reset */
input {
all: unset;
}
.LabelRoot {
font-size: 15px;
font-weight: 500;
line-height: 35px;
color: white;
}
.Input {
width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0 10px;
height: 35px;
font-size: 15px;
line-height: 1;
color: white;
background-color: var(--black-a5);
box-shadow: 0 0 0 1px var(--black-a9);
}
.Input:focus {
box-shadow: 0 0 0 2px black;
}
.Input::selection {
background-color: var(--black-a9);
color: white;
}
}Features
- Text selection is prevented when double clicking label.
- Supports nested controls.
Installation
Install the component from your command line.
pnpm add akar
yarn add akar
npm install akar
bun add akar
Anatomy
Import the component.
<script setup>
import { Label } from 'akar';
</script>
<template>
<Label />
</template>
API Reference
Root
Contains the content for the label.
| Prop | Default | Type |
|---|---|---|
as | "label" | AsTag | ComponentThe element or component this component should render as. Can be overwritten by |
asChild | booleanChange the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
for | stringThe id of the element the label is associated with. |
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.