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="ciar4n">
</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>