# Label

```mdx
<label class="label gap-2">
  <input type="checkbox" class="input" />
  Accept terms and conditions
</label>
```

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```

Or import only the base CSS, Label component CSS, and one style pack.

```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/label.css";
@import "basecoat-css/styles/vega.css";
```

Using CDN or bundler imports? See the [Installation page](/installation).

  </Step>
  <Step title="Add your label HTML">

Add `class="label"` to a `<label>` element.

```html
<label class="label" for="email">Your email address</label>
```

  </Step>
</Steps>

## Examples

### RTL

Add `dir="rtl"` to the label or an ancestor.

```mdx
<div class="grid gap-3" dir="rtl">
  <label class="label" for="email-rtl">البريد الإلكتروني</label>
  <input class="input" id="email-rtl" type="email" placeholder="name@example.com" />
</div>
```