Menu
Home Get started
Utilities
Components

Forms

v1.0.0
Give textual form controls like input's and textarea's an upgrade with custom styles, sizing, focus states, and more.
Default
<input class="form-control" name="some-text" placeholder="some text" />
Input with Label
<div>
	<label class="form-label">Input Label</label>
	<input class="form-control" placeholder="some text" />
</div>
Invalid
Please enter a text.
<div>
	<label class="form-label">Label</label>
	<input class="form-control is-invalid" placeholder="some text" />
	<div class="invalid-feedback">Please enter a text.</div>
</div>
Disabled
<div>
	<label class="form-label">Disabled</label>
	<input class="form-control" disabled />
</div>
Extended Form Example
<form>
	<div class="mb-3">
		<label for="salutation" class="form-label">Salutation</label>
		<select class="form-control" id="salutation" name="salutation">
			<option value="not-specified">not specified</option>
			<option value="male">Male</option>
			<option value="female">Female</option>
		</select>
	</div>
	<div class="mb-3">
		<label for="fullname" class="form-label">Fullname</label>
		<input class="form-control" id="fullname" name="fullname" required placeholder="your fullname" />
	</div>
	</div>
	<div class="mb-3">
		<label for="birthdate" class="form-label">Birthdate</label>
		<input class="form-control" id="birthdate" name="birthdate" type="date" required placeholder="select a date" />
	</div>
	<div class="mb-3">
		<label for="email" class="form-label">E-Mail</label>
		<input
			class="form-control"
			id="email"
			name="email"
			type="email"
			pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$"
			required
			placeholder="your email" />
	</div>
	<div class="mb-3">
		<label for="message" class="form-label">Note / Message</label>
		<textarea class="form-control" id="message" name="message"></textarea>
	</div>
	<div class="form-check mb-3">
		<input class="form-check-input" name="privacy" id="privacy" type="checkbox" required />
		<label class="form-label" for="privacy">I have read the data policy</label>
	</div>
	<div class="d-flex gap-1">
		<button id="btnCancel" type="button" class="btn btn-secondary-text">cancel</button>
		<button id="btnSubmit" class="btn btn-primary" type="submit">submit</button>
	</div>
</form>

Previous: Components

← Expansion-Panel

Next: Components

Icon →