Basecoat UI MCP

# Label Component Usage ## Overview The label component renders accessible labels associated with form controls. Labels improve accessibility by making form inputs more discoverable and providing click targets that focus the associated input. Labels can be styled automatically when used within a form or explicitly with the `label` class. ## HTML Structure ### Basic Label ```html <label class="label" for="email">Email Address</label> <input type="email" id="email" class="input"> ``` ### Label with Inline Input ```html <label class="label gap-3"> <input type="checkbox" class="input"> Accept terms and conditions </label> ``` ## Label Styles ### Standard Label ```html <label class="label" for="name">Full Name</label> ``` ### Required Field Label ```html <label class="label" for="email"> Email Address <span class="text-destructive">*</span> </label> ``` ### Optional Field Label ```html <label class="label" for="phone"> Phone Number <span class="text-muted-foreground text-sm">(Optional)</span> </label> ``` ## States ### Default State ```html <label class="label" for="input">Label Text</label> ``` ### Disabled State When a peer or child input is disabled, the label styling automatically adjusts. ```html <div class="grid gap-3"> <label class="label" for="disabled-input">Disabled Input</label> <input type="text" id="disabled-input" class="input" disabled> </div> ``` ### Error State ```html <div class="grid gap-3"> <label class="label" for="error-input">Email</label> <input type="email" id="error-input" class="input" aria-invalid="true"> <p class="text-destructive text-sm">Please enter a valid email address</p> </div> ``` ## Implementation Examples ### Form with Labels ```html <form class="form grid gap-6"> <div class="grid gap-3"> <label for="first-name" class="label">First Name</label> <input type="text" id="first-name" class="input" placeholder="John"> </div> <div class="grid gap-3"> <label for="last-name" class="label">Last Name</label> <input type="text" id="last-name" class="input" placeholder="Doe"> </div> <div class="grid gap-3"> <label for="email-form" class="label"> Email <span class="text-destructive">*</span> </label> <input type="email" id="email-form" class="input" placeholder="john@example.com" required> </div> <button type="submit" class="btn">Submit</button> </form> ``` ### Labels with Descriptions ```html <div class="grid gap-3"> <label for="bio" class="label">Bio</label> <textarea id="bio" class="textarea" placeholder="Tell us about yourself"></textarea> <p class="text-muted-foreground text-sm">Write a short biography. Max 280 characters.</p> </div> ``` ### Inline Labels (Checkbox/Radio) ```html <fieldset class="grid gap-4"> <legend class="label mb-2">Preferences</legend> <label class="label gap-3"> <input type="checkbox" class="input"> Receive email notifications </label> <label class="label gap-3"> <input type="checkbox" class="input"> Subscribe to newsletter </label> <label class="label gap-3"> <input type="checkbox" class="input"> Enable dark mode </label> </fieldset> ``` ### Horizontal Label Layout ```html <div class="flex items-center gap-4"> <label for="inline-input" class="label w-24">Username</label> <input type="text" id="inline-input" class="input flex-1"> </div> ``` ### Labels with Icons ```html <div class="grid gap-3"> <label for="search" class="label flex items-center gap-2"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <path d="m21 21-4.3-4.3"></path> </svg> Search </label> <input type="search" id="search" class="input"> </div> ``` ## Form Class Integration When using the `form` class on a parent element, labels are automatically styled without needing the explicit `label` class. ```html <form class="form grid gap-4"> <!-- Labels are automatically styled --> <div class="grid gap-3"> <label for="auto-styled">Auto-styled Label</label> <input type="text" id="auto-styled"> </div> <button type="submit" class="btn">Submit</button> </form> ``` ## Accessibility Guidelines ### Required Attributes ```html <!-- Use 'for' attribute to associate with input --> <label for="email">Email</label> <input type="email" id="email"> <!-- Or wrap the input inside the label --> <label> Email <input type="email"> </label> ``` ### Accessible Required Fields ```html <div class="grid gap-3"> <label for="required-field" class="label"> Email <span class="text-destructive" aria-hidden="true">*</span> </label> <input type="email" id="required-field" class="input" required aria-required="true" > </div> ``` ### Labels with Additional Description ```html <div class="grid gap-3"> <label for="password" class="label" id="password-label">Password</label> <input type="password" id="password" class="input" aria-labelledby="password-label" aria-describedby="password-hint" > <p id="password-hint" class="text-muted-foreground text-sm"> Must be at least 8 characters with one number </p> </div> ``` ### Hidden Labels for Icons-Only Inputs ```html <div class="relative"> <label for="search-icon" class="sr-only">Search</label> <input type="search" id="search-icon" class="input pl-10" placeholder="Search..."> <svg class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" viewBox="0 0 24 24"> <!-- search icon --> </svg> </div> ``` ## Best Practices ### Label Placement - **Above input**: Most common, best for readability - **Inline (left)**: Use for compact forms - **Inline (right)**: Use for checkboxes and radio buttons ### Text Guidelines - Keep labels concise (1-3 words when possible) - Use sentence case - Avoid ending with a colon - Be specific about what information is needed ### Visual Guidelines - Maintain consistent alignment - Use adequate spacing between label and input - Ensure labels are clearly associated with their inputs - Use visual indicators for required fields ### Do's and Don'ts **Do:** ```html <!-- Clear, specific labels --> <label class="label" for="email">Email address</label> <label class="label" for="phone">Phone number (optional)</label> <label class="label" for="dob">Date of birth</label> ``` **Don't:** ```html <!-- Vague or redundant labels --> <label class="label" for="field1">Enter your email here:</label> <label class="label" for="field2">Input</label> <label class="label" for="field3">Field 3</label> ``` ## Common Patterns ### Two-Column Form Layout ```html <form class="form grid gap-6"> <div class="grid sm:grid-cols-2 gap-6"> <div class="grid gap-3"> <label for="first" class="label">First Name</label> <input type="text" id="first" class="input"> </div> <div class="grid gap-3"> <label for="last" class="label">Last Name</label> <input type="text" id="last" class="input"> </div> </div> <div class="grid gap-3"> <label for="email-full" class="label">Email</label> <input type="email" id="email-full" class="input"> </div> <button type="submit" class="btn">Submit</button> </form> ``` ### Fieldset with Legend ```html <fieldset class="border rounded-lg p-6 space-y-4"> <legend class="text-lg font-medium px-2">Personal Information</legend> <div class="grid gap-3"> <label for="fs-name" class="label">Name</label> <input type="text" id="fs-name" class="input"> </div> <div class="grid gap-3"> <label for="fs-email" class="label">Email</label> <input type="email" id="fs-email" class="input"> </div> </fieldset> ``` ### Floating Labels (CSS Pattern) ```html <div class="relative"> <input type="email" id="floating" class="input peer pt-6 pb-2" placeholder=" " > <label for="floating" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm transition-all duration-200 pointer-events-none peer-focus:top-3 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-3 peer-[:not(:placeholder-shown)]:text-xs" > Email Address </label> </div> ```