Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 | import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './Label';
import { Input } from './Input';
const meta = {
title: 'UI/Label',
component: Label,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
required: {
control: 'boolean',
},
},
} satisfies Meta<typeof Label>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: 'Label',
},
};
export const Required: Story = {
args: {
children: 'Required Label',
required: true,
},
};
export const WithInput: Story = {
render: () => (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
),
};
export const RequiredWithInput: Story = {
render: () => (
<div className="grid w-full max-w-sm items-center gap-1.5">
<Label htmlFor="email-required" required>Email</Label>
<Input type="email" id="email-required" placeholder="Email" />
</div>
),
};
export const FormFields: Story = {
render: () => (
<div className="w-full max-w-sm space-y-4">
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="John Doe" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="email-form" required>Email</Label>
<Input type="email" id="email-form" placeholder="john@example.com" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="password" required>Password</Label>
<Input type="password" id="password" placeholder="Password" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="phone">Phone</Label>
<Input type="tel" id="phone" placeholder="+1 (555) 000-0000" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="message">Message</Label>
<textarea
id="message"
placeholder="Your message..."
className="flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
),
};
export const LabelSizes: Story = {
render: () => (
<div className="space-y-4 w-full max-w-sm">
<div className="text-lg font-semibold">Label Sizes</div>
<div className="grid w-full items-center gap-1.5">
<Label className="text-xs">Extra Small Label</Label>
<Input placeholder="Extra small" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label className="text-sm">Small Label (Default)</Label>
<Input placeholder="Small" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label className="text-base">Medium Label</Label>
<Input placeholder="Medium" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label className="text-lg">Large Label</Label>
<Input placeholder="Large" />
</div>
</div>
),
};
export const LabelStates: Story = {
render: () => (
<div className="space-y-4 w-full max-w-sm">
<div className="text-lg font-semibold">Label States</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="normal">Normal Label</Label>
<Input id="normal" placeholder="Normal input" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="required-field" required>Required Field</Label>
<Input id="required-field" placeholder="Required input" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="disabled-field" className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Disabled Label
</Label>
<Input id="disabled-field" disabled placeholder="Disabled input" />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="error-field" className="text-destructive">Error Label</Label>
<Input id="error-field" error placeholder="Error input" />
</div>
</div>
),
};
export const CheckboxAndRadio: Story = {
render: () => (
<div className="space-y-4 w-full max-w-sm">
<div className="text-lg font-semibold">Checkbox & Radio Labels</div>
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="terms"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
/>
<Label htmlFor="terms" className="cursor-pointer">
I agree to the terms and conditions
</Label>
</div>
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="newsletter"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
/>
<Label htmlFor="newsletter" className="cursor-pointer" required>
Subscribe to newsletter
</Label>
</div>
<div className="space-y-2">
<Label>Choose your preference:</Label>
<div className="flex items-center space-x-2">
<input
type="radio"
id="option1"
name="preference"
value="option1"
className="h-4 w-4 border-gray-300 text-primary focus:ring-primary"
/>
<Label htmlFor="option1" className="cursor-pointer">Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<input
type="radio"
id="option2"
name="preference"
value="option2"
className="h-4 w-4 border-gray-300 text-primary focus:ring-primary"
/>
<Label htmlFor="option2" className="cursor-pointer">Option 2</Label>
</div>
</div>
</div>
),
}; |