Label

1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3
4export function Default() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-1.5">
7      <Label htmlFor="workspace-name">Workspace name</Label>
8      <Input id="workspace-name" defaultValue="Northwind Labs" />
9    </div>
10  );
11}

1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3
4export function Default() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-1.5">
7      <Label htmlFor="workspace-name">Workspace name</Label>
8      <Input id="workspace-name" defaultValue="Northwind Labs" />
9    </div>
10  );
11}

1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3
4export function Required() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-4">
7      <div className="flex flex-col gap-1.5">
8        <Label htmlFor="company-name" required>
9          Company name
10        </Label>
11        <Input id="company-name" placeholder="Northwind Labs SL" />
12      </div>
13      <div className="flex flex-col gap-1.5">
14        <Label htmlFor="vat-number" optional description="Printed on every invoice we send you.">
15          VAT number
16        </Label>
17        <Input id="vat-number" placeholder="ESB12345678" />
18      </div>
19    </div>
20  );
21}