Label
Standalone form label; use with for/id to associate with inputs
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Label</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Label
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Label from '../components/astro/Label.astro';
---
<Label for="email">Email</Label>
<input id="email" type="email" class="form-input" />
<!-- Rizzo CSS. No script needed. -->
<label class="label" for="email">Email</label>
<input id="email" type="email" class="form-input" />
<script>
import { Label } from '$lib/rizzo';
</script>
<Label for="email">Email</Label>
<input id="email" type="email" class="form-input" />
<script setup>
import Label from '@/components/rizzo/Label.vue';
</script>
<template>
<Label for="email">Email</Label>
<input id="email" type="email" class="form-input" placeholder="you@example.com" />
</template>
import { Label } from './components/react';
<Label htmlFor="email">Email</Label>
<input id="email" type="email" className="form-input" placeholder="you@example.com" />
Other frameworks: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun