mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 21:58:17 +00:00
57 lines
1.1 KiB
Plaintext
57 lines
1.1 KiB
Plaintext
# Label
|
|
|
|
<Preview>
|
|
<label class="label gap-2">
|
|
<input type="checkbox" class="input" />
|
|
Accept terms and conditions
|
|
</label>
|
|
</Preview>
|
|
|
|
## 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.
|
|
|
|
<Preview>
|
|
<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>
|
|
</Preview>
|