Form

On this page

# Intro

Form elements are classless by default and take up the full width of the parent element.

<input type="text" placeholder="Text">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<select aria-label="Select" required>
	<option value="" selected disabled>Select</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<textarea placeholder="Textarea"></textarea>

# Layout

Form layouts are controlled by the responsive grid system. row and column classes can be used to make horizontal or vertical forms.

<form>
	<div class="row">
		<div class="column -md-4">
			<label for="username-layout1">Username</label>
			<input type="text" id="username-layout1">
		</div>
		<div class="column -md-4">
			<label for="email-layout1">Email</label>
			<input type="email" id="email-layout1">
		</div>
		<div class="column -md-4">
			<label for="password-layout1">Password</label>
			<input type="password" id="password-layout1">
		</div>
	</div>
	<div class="row">
		<div class="column -md-4">
			<label class="checkbox">
				<input type="checkbox" checked>
				<span class="toggle"></span> Checkbox
			</label>
		</div>
		<div class="column -md-4">
			<label class="radio">
				<input type="radio" name="radio" checked>
				<span class="toggle"></span> Radio
			</label>
		</div>
		<div class="column -md-4">
			<label class="switch">
				<input type="checkbox" name="switch" checked>
				<span class="toggle"></span> Switch
			</label>
		</div>
	</div>
</form>

Inline forms must use the -inline modifier to display the proper margins.

<form class="-inline">
	<div class="row">
		<div class="column -md-2">
			<label for="username-layout2" class="--align-right">Username</label>
		</div>
		<div class="column -md-10">
			<input type="text" id="username-layout2">
		</div>
	</div>
	<div class="row">
		<div class="column -md-2">
			<label for="email-layout2" class="--align-right">Email</label>
		</div>
		<div class="column -md-10">
			<input type="email" id="email-layout2">
		</div>
	</div>
	<div class="row">
		<div class="column -md-2">
			<label for="password-layout2" class="--align-right">Password</label>
		</div>
		<div class="column -md-10">
			<input type="password" id="password-layout2">
		</div>
	</div>
</form>

# Colors

Inputs have color modifiers available with -primary, -success, -warning, -danger, -dark, and -light. The -light modifier should only be used in the dark theme or inside darker elements.

<input type="text" class="-primary" placeholder="Primary">

# Readonly

Inputs can be set to readonly. Just add the readonly attribute.

<input type="text" placeholder="Readonly" readonly>
<select aria-label="Readonly Select" readonly>
	<option>Readonly</option>
</select>

# Disabled

Inputs can be disabled. Just add the disabled attribute.

<input type="text" placeholder="Disabled" disabled>
<select aria-label="Disabled Select" disabled>
	<option>Disabled</option>
</select>

# Sizing

Inputs can be sized using the -small, -normal, -medium, and -large modifiers.

<input type="text" class="-small" placeholder="Small">

# Shape

You can change the shape of inputs by using the border radius utility.

<input type="text" class="--rectangle" placeholder="Rectangle">

# Fieldset

Fieldsets can be used to group inputs and other elements together. To add a header to the fieldset, use a legend element. The grid system should be used inside of a fieldset.

Login Information
Personal Information
<fieldset>
	<legend>Login Information</legend>
	<div class="row">
	...
	</div>
</fieldset>
<fieldset>
	<legend>Personal Information</legend>
	<div class="row">
	...
	</div>
</fieldset>

# Dates

Date pickers are classless and use the browsers built-in picker.

<label for="date">Date</label>
<input type="date" id="date">
<label for="datetime">Datetime</label>
<input type="datetime-local" id="datetime">
<label for="time">Time</label>
<input type="time" id="time">
<label for="week">Week</label>
<input type="week" id="week">

# Color Picker

Color pickers are classless and use the browsers built-in picker.

<label for="color">Color</label>
<input type="color" id="color">

# Checkbox

Checkboxes are created by placing the input along with a toggle classed inline element inside a label with the checkbox class. You can change the color of checkboxes by using the -primary, -success, -warning, -danger, -dark, and -light modifiers on the label element.

<label class="checkbox">
	<input type="checkbox" checked>
	<span class="toggle"></span> Checkbox
</label>
<label class="checkbox -primary">
	<input type="checkbox" checked>
	<span class="toggle"></span> Primary
</label>
<label class="checkbox -block">
	<input type="checkbox" checked>
	<span class="toggle"></span> Blocked
</label>

# Radio

Radios are created by placing the input along with a toggle classed inline element inside a label with the radio class. You can change the color of radios by using the -primary, -success, -warning, -danger, -dark, and -light modifiers on the label element.

<label class="radio">
	<input type="radio" name="radio" checked>
	<span class="toggle"></span> Radio
</label>
<label class="radio -primary">
	<input type="radio" name="radio">
	<span class="toggle"></span> Primary
</label>
<label class="radio -block">
	<input type="radio" name="radio">
	<span class="toggle"></span> Blocked
</label>

# Switch

Switches are created by placing the checkbox or radio input along with a toggle classed inline element inside a label with the switch class. You can change the color of switches by using the -primary, -success, -warning, -danger, -dark, and -light modifiers on the label element.

<label class="switch">
	<input type="checkbox" name="switch" checked>
	<span class="toggle"></span> Switch
</label>
<label class="switch -primary">
	<input type="checkbox" name="switch">
	<span class="toggle"></span> Primary
</label>
<label class="switch -block">
	<input type="checkbox" name="switch">
	<span class="toggle"></span> Blocked
</label>

# Groups

You can group together inputs and buttons by wrapping them in a inputs container. Elements will have their left and right margins removed. The addon class can be applied to buttons to match the styling of inputs.

<div class="inputs">
	<input type="text" placeholder="search">
	<button class="button -primary">Search</button>
</div>
<div class="inputs">
	<input type="text" class="--rounded-left-full" placeholder="search">
	<button type="submit" class="addon --rounded-right-full" aria-label="search"><i class="lni lni-search-alt"></i></button>
</div>