webawesome/source/docs/forms.md

layout, title, description

layout	title	description
default.html	Forms	Default form control styles.

Forms

Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.

Form Controls

Form controls are styled at 100% of the width of their parent element.

Input Type	Example
<input type="checkbox">	Checkbox 1 Checkbox 2
<input type="color">
<input type="date">
<input type="email">
<input type="file"> File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead.	Select File
<input type="number">
<input type="password">
<input type="radio">	Radio 1 Radio 2
<input type="range">
<input type="search">
<input type="text">
<input type="time">
<select>	Item 1 Item 2 Item 3
<textarea>

You can change the size of most form controls with the input-[xs|sm|lg|xl] modifiers.

<input type="text" class="input-xs" placeholder="XS">
<input type="text" class="input-sm" placeholder="SM">
<input type="text" placeholder="Default">
<input type="text" class="input-lg" placeholder="LG">
<input type="text" class="input-xl" placeholder="XL">

<select class="input-xs"><option>Item</option></select>
<select class="input-sm"><option>Item</option></select>
<select><option>Item</option></select>
<select class="input-lg"><option>Item</option></select>
<select class="input-xl"><option>Item</option></select>

XS

SM

Default

LG

XL

Disabled form controls look like this:

Checkbox Radio

Read-only form controls look like this:

Form Control Spacing

For proper spacing of individual form controls, wrap them in input-field containers.

<div class="input-field">
  <label>Name</label>
  <input type="text">
</div>

<div class="input-field">
  <label>Password</label>
  <input type="password">
</div>

<div class="input-field">
  <label><input type="checkbox"> Remember me</label>
</div>

Username

Password

Remember me

Input Groups

Form controls and buttons can be grouped by wrapping them in input-group containers.

<div class="input-group">
  <input type="text">
  <button type="button" class="button">Submit</button>
</div>

<div class="input-group">
  <button type="button" class="button">Submit</button>
  <input type="text">
</div>

<div class="input-group">
  <input type="text" placeholder="First">
  <input type="text" placeholder="Middle">
  <input type="text" placeholder="Last">
  <button type="button" class="button">Submit</button>
</div>

<div class="input-group">
  <button type="button" class="button">Option 1</button>
  <button type="button" class="button">Option 2</button>
  <button type="button" class="button">Option 3</button>
</div>

Submit

Submit

Submit

Option 1 Option 2 Option 3

Input Addons

To create an input addon, use <span class="input-addon">. Addons can appear anywhere inside an input group. Use the input-addon-[xs|sm|lg|xl] modifiers to change the size to match adjacent form controls.

<div class="input-group">
  <span class="input-addon input-addon-xs">$</span>
  <input type="text" class="input-xs">
  <span class="input-addon input-addon-xs">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-sm">$</span>
  <input type="text" class="input-sm">
  <span class="input-addon input-addon-sm">.00</span>
</div>

<div class="input-group">
  <span class="input-addon">$</span>
  <input type="text">
  <span class="input-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-lg">$</span>
  <input type="text" class="input-lg">
  <span class="input-addon input-addon-lg">.00</span>
</div>

<div class="input-group">
  <span class="input-addon input-addon-xl">$</span>
  <input type="text" class="input-xl">
  <span class="input-addon input-addon-xl">.00</span>
</div>

$ .00

$ .00

$ .00

$ .00

$ .00

Form Groups

Related form controls can be grouped in a <fieldset>. An optional <legend> can be used to display a name for the group.

<fieldset>
  <legend>User</legend>
  ...
</fieldset>

Login

Username

Password

Remember me

Login

Validation

Form controls can be made valid or invalid using the input-valid and input-invalid modifiers. It’s better to apply modifiers to the surrounding input-field so labels will be styled as well, but modifiers can be applied directly to form controls as needed.

<div class="input-field input-valid">
  <label>Valid</label>
  <input type="text">
</div>

<div class="input-field input-invalid">
  <label>Invalid</label>
  <input type="text">
</div>

Valid

Invalid