Forms.

Form Components.

<!-- Form Elements Section -->
        <section class="section">
            <h2>Form Elements</h2>

            <!-- Checkboxes -->
            <div class="form-group">
                <h3>Custom Checkboxes</h3>
                <label class="checkbox-container">
                    <input type="checkbox" checked>
                    <span class="checkmark"></span>
                    Default Checked
                </label>
                <label class="checkbox-container">
                    <input type="checkbox">
                    <span class="checkmark"></span>
                    Default Unchecked
                </label>
            </div>

            <!-- Radio Buttons -->
            <div class="form-group">
                <h3>Radio Buttons</h3>
                <label class="radio-container">
                    <input type="radio" name="radio" checked>
                    <span class="radio-mark"></span>
                    Option One
                </label>
                <label class="radio-container">
                    <input type="radio" name="radio">
                    <span class="radio-mark"></span>
                    Option Two
                </label>
            </div>

            <!-- Toggle Switch -->
            <div class="form-group">
                <h3>Toggle Switches</h3>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                    Enable notifications
                </label>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                    Dark mode
                </label>
            </div>

            <!-- Select Dropdown -->
            <div class="form-group">
                <h3>Custom Select</h3>
                <div class="select-wrapper">
                    <select class="custom-select">
                        <option value="" disabled selected>Choose an option</option>
                        <option value="1">Option One</option>
                        <option value="2">Option Two</option>
                        <option value="3">Option Three</option>
                    </select>
                </div>
            </div>

            <!-- Range Slider -->
            <div class="form-group">
                <h3>Range Slider</h3>
                <div class="range-wrapper">
                    <input type="range" min="0" max="100" value="50" class="range-slider">
                    <output class="range-value">50</output>
                </div>
            </div>

            <!-- File Upload -->
            <div class="form-group">
                <h3>File Upload</h3>
                <label class="file-upload">
                    <input type="file" class="file-input">
                    <span class="file-trigger">
                        <i class="fas fa-cloud-upload-alt"></i>
                        Choose a file
                    </span>
                    <span class="file-name">No file chosen</span>
                </label>
            </div>

            <!-- Date Picker -->
            <div class="form-group">
                <h3>Date Picker</h3>
                <div class="date-picker-wrapper">
                    <input type="date" class="date-picker">
                </div>
            </div>
        </section>