Sizes

Every FrontAlign form control supports three explicit size variants: is-small, is-medium, and is-large. The default (no size class) sits between small and medium. Size classes scale padding, font size, and minimum height together — so controls in a group always align correctly when they share the same size.

Input Sizes

<div class="group">
  <label class="form-label">Small</label>
  <input class="form-input is-small" type="text" placeholder="Small input">
</div>

<div class="group">
  <label class="form-label">Default</label>
  <input class="form-input" type="text" placeholder="Default input">
</div>

<div class="group">
  <label class="form-label">Medium</label>
  <input class="form-input is-medium" type="text" placeholder="Medium input">
</div>

<div class="group">
  <label class="form-label">Large</label>
  <input class="form-input is-large" type="text" placeholder="Large input">
</div>

Small

Default

Medium

Large

Select Sizes

<select class="form-select is-small">
  <option>Small select</option>
</select>

<select class="form-select">
  <option>Default select</option>
</select>

<select class="form-select is-medium">
  <option>Medium select</option>
</select>

<select class="form-select is-large">
  <option>Large select</option>
</select>

Textarea Sizes

is-small, is-medium, and is-large scale the font size and padding of the textarea. For controlling the height, use size-md and size-lg on the textarea itself.

<textarea class="form-textarea is-small" placeholder="Small textarea"></textarea>
<textarea class="form-textarea" placeholder="Default textarea"></textarea>
<textarea class="form-textarea is-medium" placeholder="Medium textarea"></textarea>
<textarea class="form-textarea is-large" placeholder="Large textarea"></textarea>

File Input Sizes

<input class="form-input-file is-small" type="file">
<input class="form-input-file" type="file">
<input class="form-input-file is-medium" type="file">
<input class="form-input-file is-large" type="file">

Checkbox and Radio Sizes

<div class="group-checkbox">
  <input class="form-input-checkbox is-small" id="sz-chk-sm" type="checkbox" checked>
  <label class="form-label" for="sz-chk-sm">Small checkbox</label>
</div>

<div class="group-checkbox">
  <input class="form-input-checkbox" id="sz-chk-def" type="checkbox" checked>
  <label class="form-label" for="sz-chk-def">Default checkbox</label>
</div>

<div class="group-checkbox">
  <input class="form-input-checkbox is-medium" id="sz-chk-md" type="checkbox" checked>
  <label class="form-label" for="sz-chk-md">Medium checkbox</label>
</div>

<div class="group-checkbox">
  <input class="form-input-checkbox is-large" id="sz-chk-lg" type="checkbox" checked>
  <label class="form-label" for="sz-chk-lg">Large checkbox</label>
</div>

Small checkbox

Default checkbox

Medium checkbox

Large checkbox

Switch Sizes

<div class="group-switch">
  <input class="form-input-checkbox" id="sz-sw-def" type="checkbox" checked>
  <label class="form-label" for="sz-sw-def">Default switch</label>
</div>

<div class="group-switch">
  <input class="form-input-checkbox is-medium" id="sz-sw-md" type="checkbox" checked>
  <label class="form-label" for="sz-sw-md">Medium switch</label>
</div>

<div class="group-switch">
  <input class="form-input-checkbox is-large" id="sz-sw-lg" type="checkbox" checked>
  <label class="form-label" for="sz-sw-lg">Large switch</label>
</div>

Default switch

Medium switch

Large switch

Size Reference

Class	Font size	Padding (Y / X)	Min height
`is-small`	0.875rem	0.375rem / 0.75rem	—
Default	0.875rem	0.625rem / 0.75rem	—
`is-medium`	1rem	0.625rem / 1rem	2.75rem
`is-large`	1.125rem	0.875rem / 1.25rem	3.5rem