Fields
Base styling for field elements icnluding inputs, textareas and selects
Inputs
<p>
<label
>First Name
<input type="text" placeholder="John" />
</label>
</p>
<p>
<label
>Last Name
<input type="text" placeholder="Dow" />
</label>
</p>
<p>
<label for="input-date"
>Input with type="date"
<input type="date" id="input-date" />
</label>
</p>
<p>
<label for="input-time"
>Input with type="time"
<input type="time" id="input-time" />
</label>
</p>
<p>
<label
>Type
<select name="type">
<option value="message">Message</option>
<option value="feature">Feature</option>
<option value="report">Report</option>
</select>
</label>
</p>Input States
<p>
<label for="input-text-standard"
>Standard
<input type="text" />
</label>
</p>
<p>
<label for="input-text-disabled"
>Disabled
<input type="text" disabled="" />
</label>
</p>
<p>
<label for="input-text-invalid"
>Invalid
<input type="email" required="" value="Startr" />
</label>
</p>
<p>
<label for="input-text-readonly"
>Read Only
<input type="text" readonly="" />
</label>
</p>Textarea
<label
>Message
<textarea placeholder="Hello People..."></textarea>
</label>Radios
<input type="radio" name="radio" id="radio-1" checked="" />
<label for="radio-1">Radio 1</label>
<br />
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Radio 2</label>
<br />
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Radio 3</label>
<br />
<input type="radio" name="radio" id="radio-4" disabled="" />
<label for="radio-4">Radio 4 (disabled)</label>Checkboxes
<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1">Checkbox</label>
<br />
<input type="checkbox" id="checkbox-2" checked="" />
<label for="checkbox-2">Checked Checkbox</label>
<br />
<input type="checkbox" id="checkbox-3" disabled="" />
<label for="checkbox-3">Disabled Checkbox</label>Fieldset
<fieldset>
<legend>Fieldset</legend>
<div class="grid" style="--col: 2">
<p>
<label
>Username
<input type="text" placeholder="John" />
</label>
</p>
<p>
<label
>Password
<input type="password" placeholder="Dow" />
</label>
</p>
</div>
<button>Submit</button>
</fieldset>Select
<label for="select">Select
<select id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<optgroup label="Subgroup">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</optgroup>
</select>
</label>Multi Select
<label for="selectmultiple"
>Multiselect
<select id="selectmultiple" multiple="">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<optgroup label="Subgroup">
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</optgroup>
</select>
</label>File Input
<label for="input-file"
>Input File
<input type="file" />
</label>Color Input
<label for="input-color">Input Color
<input type="color" value="#4a69bd" />
</label>Range Input
<label for="input-range"
>Input Range
<input type="range" />
</label>Number Slider
<label for="slider-basic">
Basic Slider (0-100)
<input type="range" id="slider-basic" min="0" max="100" value="50" />
<output for="slider-basic">50</output>
</label>
<label for="slider-step">
Slider with Steps (0-10, step 0.5)
<input type="range" id="slider-step" min="0" max="10" step="0.5" value="5" />
<output for="slider-step">5</output>
</label>
<label for="slider-custom">
Custom Styled Slider with Live Value
<div style="display: flex; align-items: center; gap: 1rem;">
<span style="min-width: 2rem; text-align: right;">0</span>
<input type="range" id="slider-custom" min="0" max="200" value="100" style="flex: 1;" />
<span style="min-width: 2rem;">200</span>
</div>
<div style="text-align: center; margin-top: 0.5rem; font-weight: bold; font-size: 1.2rem;">
Value: <span id="slider-custom-value">100</span>
</div>
</label>
<script>
// Update output elements for basic sliders
document.getElementById('slider-basic').addEventListener('input', function(e) {
document.querySelector('output[for="slider-basic"]').textContent = e.target.value;
});
document.getElementById('slider-step').addEventListener('input', function(e) {
document.querySelector('output[for="slider-step"]').textContent = e.target.value;
});
// Update custom slider display
document.getElementById('slider-custom').addEventListener('input', function(e) {
document.getElementById('slider-custom-value').textContent = e.target.value;
});
</script>Number Input
<label for="input-number-basic"
>Basic Number Input
<input type="number" value="5" min="0" max="10" step="1" />
</label>
<label for="input-number-decimal"
>Decimal Number Input
<input type="number" value="2.5" min="0" max="10" step="0.1" />
</label>
<label for="input-number-custom"
>Number Input with Custom Controls
<div style="display: flex; align-items: center; gap: 0.5rem;">
<button type="button" onclick="decrementNumber('input-number-custom')" style="min-width: 2rem; padding: 0.25rem 0.5rem;">-</button>
<input type="number" id="input-number-custom" value="10" min="1" max="100" step="1" style="text-align: center; flex: 1;" />
<button type="button" onclick="incrementNumber('input-number-custom')" style="min-width: 2rem; padding: 0.25rem 0.5rem;">+</button>
</div>
</label>
<script>
function incrementNumber(inputId) {
const input = document.getElementById(inputId);
const step = parseFloat(input.step) || 1;
const max = parseFloat(input.max);
const current = parseFloat(input.value) || 0;
const newValue = current + step;
if (isNaN(max) || newValue <= max) {
input.value = newValue;
input.dispatchEvent(new Event('input', { bubbles: true }));
}
}
function decrementNumber(inputId) {
const input = document.getElementById(inputId);
const step = parseFloat(input.step) || 1;
const min = parseFloat(input.min);
const current = parseFloat(input.value) || 0;
const newValue = current - step;
if (isNaN(min) || newValue >= min) {
input.value = newValue;
input.dispatchEvent(new Event('input', { bubbles: true }));
}
}
</script>Custom Checkboxes with Fun Styles
<!-- Heart checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="heart-checkbox" class="custom-checkbox heart-checkbox" />
<label for="heart-checkbox" class="custom-label">Love this feature ❤️</label>
</div>
<!-- Star checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="star-checkbox" class="custom-checkbox star-checkbox" />
<label for="star-checkbox" class="custom-label">Rate with stars ⭐</label>
</div>
<!-- Emoji checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="emoji-checkbox" class="custom-checkbox emoji-checkbox" />
<label for="emoji-checkbox" class="custom-label">Fun with emojis 😄</label>
</div>
<!-- Logo checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="logo-checkbox" class="custom-checkbox logo-checkbox" />
<label for="logo-checkbox" class="custom-label">Brand logo checkbox</label>
</div>
<!-- Toggle switch style -->
<div class="custom-checkbox-container">
<input type="checkbox" id="toggle-checkbox" class="custom-checkbox toggle-checkbox" />
<label for="toggle-checkbox" class="custom-label toggle-label">Toggle switch style</label>
</div>
<!-- Geometric checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="geometric-checkbox" class="custom-checkbox geometric-checkbox" />
<label for="geometric-checkbox" class="custom-label">Geometric style ◆</label>
</div>
<!-- Music note checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="music-checkbox" class="custom-checkbox music-checkbox" />
<label for="music-checkbox" class="custom-label">Music lover ♪</label>
</div>
<!-- Gradient checkbox -->
<div class="custom-checkbox-container">
<input type="checkbox" id="gradient-checkbox" class="custom-checkbox gradient-checkbox" />
<label for="gradient-checkbox" class="custom-label">Gradient vibes 🌈</label>
</div>