### Basic Form Fields

Standard form field components with labels and inputs.

#### Text Input Field

Full Name
HTML

    <div class="formfield">
                <label class="formfield__label" for="name">Full Name</label>
                <input
                    class="formfield__input"
                    type="text"
                    id="name"
                    placeholder="Enter your name"
                />
            </div>

#### Required Field

Email Address
HTML

    <div class="formfield formfield--required">
                <label class="formfield__label" for="email">Email Address</label>
                <input
                    class="formfield__input"
                    type="email"
                    id="email"
                    placeholder="you@example.com"
                    required
                />
            </div>

#### With Helper Text

Password Must be at least 8 characters
HTML

    <div class="formfield">
                <label class="formfield__label" for="password">Password</label>
                <input
                    class="formfield__input"
                    type="password"
                    id="password"
                    placeholder="Enter password"
                />
                <span class="formfield__hint">Must be at least 8 characters</span>
            </div>

### Validation States

Form fields with success, error, and warning states.

#### Success State

Username Username is available
HTML

    <div class="formfield formfield--success">
                <label class="formfield__label" for="username">Username</label>
                <input
                    class="formfield__input"
                    type="text"
                    id="username"
                    value="johndoe"
                />
                <span class="formfield__hint formfield__hint--success">
                    Username is available
                </span>
            </div>

#### Error State

Email Please enter a valid email address
HTML

    <div class="formfield formfield--error">
                <label class="formfield__label" for="email-error">Email</label>
                <input
                    class="formfield__input"
                    type="email"
                    id="email-error"
                    value="invalid-email"
                />
                <span class="formfield__hint formfield__hint--error">
                    Please enter a valid email address
                </span>
            </div>

#### Warning State

Password Password strength: Weak
HTML

    <div class="formfield formfield--warning">
                <label class="formfield__label" for="password-warn">
                    Password
                </label>
                <input
                    class="formfield__input"
                    type="password"
                    id="password-warn"
                    value="weak"
                />
                <span class="formfield__hint formfield__hint--warning">
                    Password strength: Weak
                </span>
            </div>

### Radio Button Fields

Radio button groups for single-selection options.

#### Basic Radio Group

Select an option
Option One Option Two Option Three
HTML

    <fieldset class="formfield formfield--group">
                <legend class="formfield__label">Select an option</legend>
                <div class="formfield__options">
                    <label class="formfield__radio">
                        <input type="radio" name="option" value="1" checked />
                        <span class="formfield__radio-label">Option One</span>
                    </label>
                    <label class="formfield__radio">
                        <input type="radio" name="option" value="2" />
                        <span class="formfield__radio-label">Option Two</span>
                    </label>
                    <label class="formfield__radio">
                        <input type="radio" name="option" value="3" />
                        <span class="formfield__radio-label">Option Three</span>
                    </label>
                </div>
            </fieldset>

#### Inline Radio Group

Payment Method
Credit Card PayPal Bank Transfer
HTML

    <fieldset class="formfield formfield--group">
                <legend class="formfield__label">Payment Method</legend>
                <div class="formfield__options formfield__options--inline">
                    <label class="formfield__radio">
                        <input type="radio" name="payment" value="card" checked />
                        <span class="formfield__radio-label">Credit Card</span>
                    </label>
                    <label class="formfield__radio">
                        <input type="radio" name="payment" value="paypal" />
                        <span class="formfield__radio-label">PayPal</span>
                    </label>
                    <label class="formfield__radio">
                        <input type="radio" name="payment" value="bank" />
                        <span class="formfield__radio-label">Bank Transfer</span>
                    </label>
                </div>
            </fieldset>

### Checkbox Fields

Checkbox groups for multi-selection options.

#### Checkbox Group

Select your interests
Design Development Marketing
HTML

    <fieldset class="formfield formfield--group">
                <legend class="formfield__label">Select your interests</legend>
                <div class="formfield__options">
                    <label class="formfield__checkbox">
                        <input
                            type="checkbox"
                            name="interest"
                            value="design"
                            checked
                        />
                        <span class="formfield__checkbox-label">Design</span>
                    </label>
                    <label class="formfield__checkbox">
                        <input
                            type="checkbox"
                            name="interest"
                            value="development"
                        />
                        <span class="formfield__checkbox-label">Development</span>
                    </label>
                    <label class="formfield__checkbox">
                        <input type="checkbox" name="interest" value="marketing" />
                        <span class="formfield__checkbox-label">Marketing</span>
                    </label>
                </div>
            </fieldset>

#### Single Checkbox

I agree to the terms and conditions
HTML

    <div class="formfield">
                <label class="formfield__checkbox">
                    <input type="checkbox" name="terms" required />
                    <span class="formfield__checkbox-label">
                        I agree to the terms and conditions
                    </span>
                </label>
            </div>

### Select & Textarea

Dropdown select and multi-line text inputs.

#### Select Dropdown

Country
HTML

    <div class="formfield">
                <label class="formfield__label" for="country">Country</label>
                <select class="formfield__select" id="country">
                    <option value="">Select a country</option>
                    <option value="us">United States</option>
                    <option value="uk">United Kingdom</option>
                    <option value="ca">Canada</option>
                    <option value="au">Australia</option>
                </select>
            </div>

#### Textarea

Message Maximum 500 characters
HTML

    <div class="formfield">
                <label class="formfield__label" for="message">Message</label>
                <textarea
                    class="formfield__textarea"
                    id="message"
                    rows="4"
                    placeholder="Enter your message"
                ></textarea>
                <span class="formfield__hint">Maximum 500 characters</span>
            </div>

### Disabled Fields

Form fields in a disabled state.

#### Disabled Input

Disabled Field
HTML

    <div class="formfield formfield--disabled">
                <label class="formfield__label" for="disabled-input">
                    Disabled Field
                </label>
                <input
                    class="formfield__input"
                    type="text"
                    id="disabled-input"
                    value="Cannot be edited"
                    disabled
                />
            </div>

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