Label
A standalone label for form controls. Use the for prop to associate with an input's id. For full form layout with help text and error use FormGroup.
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
Props
for (string, optional) - id of the associated form control required (boolean, optional) - Shows required indicator (asterisk) after the label class (string, optional) - Additional CSS classes
Example
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';
import Input from '../components/astro/Input.astro';
---
<Label for="email" required>Email</Label>
<Input id="email" type="email" />
<label class="label label--required" for="email">Email</label>
<input id="email" type="email" class="form-input" />
<script>
import { Label, Input } from '$lib/rizzo';
</script>
<Label for="email" required>Email</Label>
<Input id="email" type="email" />
<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: Vanilla · Svelte · Vue · React