Forms

Input sizes

Two size modifiers adjust padding and font size. Without a size class, the default styling applies.

<label>Small input
	<input type="text" class="input-sm" placeholder="Small input">
</label>
<label>Default input
	<input type="text" placeholder="Default input">
</label>
<label>Large input
	<input type="text" class="input-lg" placeholder="Large input">
</label>

Size reference

Textarea sizes

<label>Small textarea
	<textarea class="input-sm" placeholder="Small textarea"></textarea>
</label>
<label>Large textarea
	<textarea class="input-lg" placeholder="Large textarea"></textarea>
</label>

Select sizes

<label>Small select
	<select class="input-sm">
		<option>Option 1</option>
		<option>Option 2</option>
	</select>
</label>
<label>Large select
	<select class="input-lg">
		<option>Option 1</option>
		<option>Option 2</option>
	</select>
</label>

Validation states

µForms provides two validation classes that set border color and focus ring color. For error states, use the native aria-invalid="true" attribute (built-in).

<label>Success
	<input type="text" class="input-success" value="Valid value">
</label>
<label>Warning
	<input type="text" class="input-warning" value="Needs attention">
</label>
<label>Error (native)
	<input type="text" aria-invalid="true" value="Invalid value">
</label>

Validation reference

Validation on textarea

<label>Success textarea
	<textarea class="input-success">This content is valid.</textarea>
</label>
<label>Warning textarea
	<textarea class="input-warning">This content needs review.</textarea>
</label>

Validation on select

<label>Success select
	<select class="input-success">
		<option>Valid choice</option>
	</select>
</label>
<label>Warning select
	<select class="input-warning">
		<option>Needs review</option>
	</select>
</label>

Combining size and validation

Size and validation classes can be used together on the same element:

<label>Small + success
	<input type="text" class="input-sm input-success" value="Small valid">
</label>
<label>Large + warning
	<input type="text" class="input-lg input-warning" value="Large needs attention">
</label>

CSS classes reference

Accessibility

• Use aria-invalid="true" for error states (native support).
• Always wrap form controls inside <label> elements for proper association.
• Validation colors supplement, but do not replace, text-based error messages.