---
title: "Label"
description: "Renders an accessible label associated with controls."
canonical_url: "https://vinicunca.dev/akar/components/label"
---
# Label

> Renders an accessible label associated with controls.

```vue [index.vue]
<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>
```

```css [styles.css]
@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.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import the component.

```vue
<script setup>
import { Label } from 'akar';
</script>

<template>
  <Label />
</template>
```

## API Reference

### Root

Contains the content for the label.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"label"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `for` |  | `string` | The id of the element the label is associated with. |

[Label.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Label/Label.vue)

## 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.

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Label)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.