## Labels

Label components for form elements and content annotation.

### Native Labels

The `<label>` element styled with base label styles.

Default Label
View Code

    <label for="demo-input-1">Default Label</label>
    <input type="text" id="demo-input-1" class="input input--base" placeholder="Input field">

### Label Sizes

Labels come in three sizes: small, medium (default), and large.

Small Label (.label--sm)
Medium Label (.label--md)
Large Label (.label--lg)
View Code

    <div style="display: flex; flex-direction: column; gap: 24px;">
        <div>
            <label class="label label--sm" for="demo-sm">Small Label (.label--sm)</label>
            <input type="text" id="demo-sm" class="input input--base input--sm" placeholder="Small input">
        </div>

        <div>
            <label class="label label--md" for="demo-md">Medium Label (.label--md)</label>
            <input type="text" id="demo-md" class="input input--base input--md" placeholder="Medium input">
        </div>

        <div>
            <label class="label label--lg" for="demo-lg">Large Label (.label--lg)</label>
            <input type="text" id="demo-lg" class="input input--base input--lg" placeholder="Large input">
        </div>
    </div>

### Hidden Labels (Screen Reader Only)

Visually hidden labels that remain accessible to screen readers. Essential for accessibility when the input's purpose is clear visually but needs labeling for assistive technology.

Search
View Code

    <div style="display: flex; gap: 12px; align-items: center;">
        <label class="label label--hidden" for="search-field">Search</label>
        <input type="search" id="search-field" class="input input--base" placeholder="Search...">
        <button class="button button--base button--primary">Search</button>
    </div>

### Labels with Required Indicator

Labels indicating required fields with an asterisk.

Email Address *
Phone Number (optional)
View Code

    <div style="display: flex; flex-direction: column; gap: 24px;">
        <div>
            <label class="label" for="required-field">
                Email Address <span style="color: var(--color_error);">*</span>
            </label>
            <input type="email" id="required-field" class="input input--base" placeholder="name@example.com" required>
        </div>

        <div>
            <label class="label" for="optional-field">
                Phone Number <span style="opacity: 0.6; font-weight: 400;">(optional)</span>
            </label>
            <input type="tel" id="optional-field" class="input input--base" placeholder="+1 (555) 000-0000">
        </div>
    </div>

### Form Labels

Labels styled specifically for form contexts using the `.form-label` class.

Full Name
Email (Small Label)
Message (Large Label)
View Code

    <form style="display: flex; flex-direction: column; gap: 20px; max-width: 400px;">
        <div>
            <label class="form-label" for="form-name">Full Name</label>
            <input type="text" id="form-name" class="input input--base" placeholder="John Doe">
        </div>

        <div>
            <label class="form-label form-label--sm" for="form-email">Email (Small Label)</label>
            <input type="email" id="form-email" class="input input--base" placeholder="john@example.com">
        </div>

        <div>
            <label class="form-label form-label--lg" for="form-message">Message (Large Label)</label>
            <textarea id="form-message" class="input input--base" rows="3" placeholder="Your message..."></textarea>
        </div>
    </form>

### Labels with Various Input Types

Labels paired with different input types.

Text Input
Select Dropdown
Textarea
Checkbox Label
Radio Group
Option A
Option B
Option C
View Code

    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
        <!-- Text Input -->
        <div>
            <label class="label" for="text-input">Text Input</label>
            <input type="text" id="text-input" class="input input--base" placeholder="Enter text">
        </div>

        <!-- Select -->
        <div>
            <label class="label" for="select-input">Select Dropdown</label>
            <select id="select-input" class="input input--base">
                <option value="">Choose an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>

        <!-- Textarea -->
        <div>
            <label class="label" for="textarea-input">Textarea</label>
            <textarea id="textarea-input" class="input input--base" rows="3" placeholder="Enter longer text..."></textarea>
        </div>

        <!-- Checkbox -->
        <div style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="checkbox-input" class="input--checkbox">
            <label for="checkbox-input">Checkbox Label</label>
        </div>

        <!-- Radio Group -->
        <fieldset style="border: none; padding: 0; margin: 0;">
            <legend class="label" style="margin-bottom: 8px;">Radio Group</legend>
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="radio" id="radio-1" name="radio-group" class="input--radio">
                    <label for="radio-1">Option A</label>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="radio" id="radio-2" name="radio-group" class="input--radio">
                    <label for="radio-2">Option B</label>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="radio" id="radio-3" name="radio-group" class="input--radio">
                    <label for="radio-3">Option C</label>
                </div>
            </div>
        </fieldset>
    </div>

### Inline Labels

Labels displayed inline with their inputs.

Username
Password
View Code

    <div style="display: flex; flex-direction: column; gap: 16px;">
        <div style="display: flex; align-items: center; gap: 12px;">
            <label for="inline-1" style="min-width: 100px;">Username</label>
            <input type="text" id="inline-1" class="input input--base input--base--inline" placeholder="Enter username">
        </div>

        <div style="display: flex; align-items: center; gap: 12px;">
            <label for="inline-2" style="min-width: 100px;">Password</label>
            <input type="password" id="inline-2" class="input input--base input--base--inline" placeholder="Enter password">
        </div>
    </div>

### CSS Classes Reference

Class | Description
--- | ---
`.label` | Base label class with default styling
`.label--sm` | Small size label variant
`.label--md` | Medium size label variant (default)
`.label--lg` | Large size label variant
`.label--hidden` | Visually hidden but accessible to screen readers
`.form-label` | Label styled for form contexts
`.form-label--sm` | Small form label
`.form-label--lg` | Large form label

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!