Form controls

<div class="form-grid">
<label class="field">
<span>Full name</span>
<input name="name" type="text" value="" placeholder="Alex Morgan" maxlength="80">
</label>
<label class="field">
<span>Email address</span>
<input name="email" type="email" value="" placeholder="hello@example.com">
</label>
<label class="field">
<span>Phone number</span>
<input name="telephone" type="tel" value="" autocomplete="tel">
</label>
<label class="field">
<span>Website URL</span>
<input name="website" type="url" value="" placeholder="https://example.com">
</label>
<label class="field">
<span>Read-only field</span>
<input name="readonly" type="text" value="ORB-2026" readonly>
</label>
<label class="field">
<span>Disabled field</span>
<input name="disabled" type="text" value="Sample content" disabled>
</label>
</div>

<div class="stack">
<label class="field">
<span>Category</span>
<select name="category">
<option>Web design</option>
<option>Product design</option>
<option>Branding</option>
<option>Development</option>
<option>Marketing</option>
<option>UI / UX</option>
</select>
</label>
<label class="field">
<span>Searchable choice</span>
<input name="searchable" list="project-types">
<datalist id="project-types">
<option value="Web design">
</option>
<option value="Product design">
</option>
<option value="Branding">
</option>
<option value="Development">
</option>
<option value="Marketing">
</option>
<option value="UI / UX">
</option>
</datalist>
</label>
<label class="field">
<span>Multiple choices</span>
<select multiple name="multiple" size="3">
<option>Web design</option>
<option>Product design</option>
<option>Branding</option>
<option>Development</option>
<option>Marketing</option>
<option>UI / UX</option>
</select>
</label>
<fieldset class="choice-fieldset">
<legend>Delivery preference</legend>
<div class="flex wrap">
<label class="check-label">
<input type="radio" name="delivery" value="standard" checked>Standard</label>
<label class="check-label">
<input type="radio" name="delivery" value="priority" >Priority</label>
</div>
</fieldset>
<label class="toggle-row">
<span>Enable notifications</span>
<input type="checkbox" class="switch" name="notifications" checked>
</label>
</div>

<div class="form-grid">
<label class="field">
<span>Date</span>
<input name="date" type="date" value="" >
</label>
<label class="field">
<span>Time</span>
<input name="time" type="time" value="" >
</label>
<label class="field">
<span>Month</span>
<input name="month" type="month" value="" >
</label>
<label class="field">
<span>Week</span>
<input name="week" type="week" value="" >
</label>
<label class="field">
<span>Appointment</span>
<input name="appointment" type="datetime-local" value="" >
</label>
<label class="field">
<span>Accent color</span>
<input name="color" type="color" value="#7456e8" >
</label>
<label class="field full">
<span>Capacity: <output id="range-value" for="capacity">50</output>%</span>
<input id="capacity" name="capacity" type="range" min="0" max="100" value="50" data-range-output="range-value">
</label>
</div>

<div class="stack">
<label class="field">
<span>Amount</span>
<span class="input-group">
<span class="input-addon">$</span>
<input type="number" name="amount" min="0" step="0.01" value="49">
<span class="input-addon">USD</span>
</span>
</label>
<label class="field">
<span>Public handle</span>
<span class="input-group">
<span class="input-addon">@</span>
<input type="text" name="handle" maxlength="40" placeholder="haneen">
</span>
</label>
<div class="field">
<label for="sample-password">Sample password</label>
<span class="input-group">
<input id="sample-password" name="password" type="password" autocomplete="new-password">
<button type="button" class="btn btn-secondary" data-password-toggle aria-controls="sample-password" aria-pressed="false">Show password</button>
</span>
</div>
</div>

<label class="field">
<span>Description</span>
<textarea name="description" maxlength="300" data-character-count="character-count" rows="5">
</textarea>
<small id="character-count" aria-live="polite">0 / 300 characters</small>
</label>

<label class="field">
<span>Choose files</span>
<input type="file" name="files" multiple data-file-list="selected-files" aria-describedby="file-hint">
</label>
<p id="file-hint" class="small muted section-copy">Choose local files to inspect their names and sizes. Files are not uploaded or retained.</p>
<ul class="file-selection" id="selected-files" aria-live="polite">
<li>No files selected.</li>
</ul>