forms #

Form elements have basic default styles that can be omitted with .unstyled.

A single select draws its arrow in the text color, so it follows the color scheme and the disabled look; list boxes (multiple, or a size above 1) have none. aria-invalid="true" turns a control's border and focus ring negative, and aria-disabled="true" gives it the disabled look while keeping it focusable. A disabled checkbox or radio takes the default cursor, though a label wrapping it still shows the pointer.

<input aria-invalid="true" />
<input aria-disabled="true" />

aria-invalid

aria-disabled

form with a fieldset
#

<form>
	<fieldset>
		<legend>
			a <MdnLink path="Web/HTML/Element/legend" />
		</legend>
		<label>
			<div class="title">
				username
			</div>
			<input
				bind:value={username}
				placeholder=">"
			/>
		</label>
		...
	</fieldset>
	...
</form>

`form` with range input
#

`form` with checkboxes
#

The above are wrapped with: <label class="row"> with .disabled as needed: <label class="row disabled">

`form` with radio inputs
#

Size composites
#

The size composite classes .sized_xs, .sized_sm, .sized_md, .sized_lg, and .sized_xl scale inputs and buttons, adjusting height and padding. Apply directly or on a container to cascade to children.

<input class="sized_xs" />
<input class="sized_sm" />
<input />
<input class="sized_lg" />
<input class="sized_xl" />

Set on a container and children inherit the sizing:

<form class="sized_xs">...</form>