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-PanelNext: Components
Icon →