# Form controls

Native HTML fields follow the site's theme. Labels, hints, and errors stay beside
the field they describe. These examples are for trying the controls; they do not
submit or save your entries.

## Contact details

<label class="pmx-field" for="example-name">Name</label>
<input id="example-name" name="name" autocomplete="name" placeholder="Your name" />

<div class="pmx-field">
<label for="example-field-1">Email</label>
<input id="example-field-1" type="email" autocomplete="email" placeholder="you@example.com" aria-describedby="example-email-hint" />
<small id="example-email-hint">Use an address where you can receive replies.</small>
</div>

<div class="pmx-field">
<label for="example-topic">Topic</label>
<select id="example-topic"><option value="">Choose a topic</option><option>Design</option><option>Development</option><option>Teaching</option></select>
</div>

<label class="pmx-field">
Message
<textarea rows="4" placeholder="What would you like to discuss?"></textarea>
</label>

---

## Choices

<fieldset class="pmx-fieldset">
<legend>Format</legend>
<label class="input-option"><input type="radio" name="example-format" value="online" checked /><span>Online</span></label>
<label class="input-option"><input type="radio" name="example-format" value="in-person" /><span>In person</span></label>
</fieldset>

<label class="input-option"><input type="checkbox" /><span>Include a copy of my notes</span></label>

<div class="pmx-field">
<label for="example-field-2">Session length</label>
<input id="example-field-2" type="range" min="15" max="90" step="15" value="45" />
<small>15–90 minutes</small>
</div>

---

## Field states

<div class="pmx-field">
<label for="example-field-3">Email with an error</label>
<input id="example-field-3" type="email" value="not-an-email" aria-invalid="true" aria-describedby="example-email-error" />
<small id="example-email-error" class="pmx-field-error">Enter a complete email address.</small>
</div>

<div class="pmx-field">
<label for="example-field-4">Reference number</label>
<input id="example-field-4" value="PMX-1042" readonly />
<small>You can select and copy this value.</small>
</div>

<label class="pmx-field">
Unavailable field
<input value="Registration is closed" disabled />
</label>

<label class="input-option"><input type="checkbox" disabled /><span>Unavailable option</span></label>

---

## Native pickers

<label class="pmx-field">Date<input type="date" /></label>
<label class="pmx-field">Attachment<input type="file" /></label>
<label class="pmx-field">Color<input type="color" value="#725ac1" /></label>

See [Form fields](../docs/site/ui.reference.md#form-fields) for the HTML and styling conventions.