Styleguide | UI Elements | Whimsy - SaaS Website Template

Forms

Basic Elements

Input Sizes Create and group avatars of different sizes and shapes with the css classes.

Small

Medium

Large

Input Group Enhance form controls by adding text, buttons, or button groups beside textual inputs, custom selects, and custom file inputs.

Static

@email.com

Buttons

Input Types Most common form control, text-based input fields.

Normal Form

Helping text Help text that extends beyond one line and breaks into new lines.

Password

Show/Hide Password

Text Area

Horizontal Form

Input Select

Default file input

Date

Time

Number

Input States Most common form control, text-based input fields.

Blank Form

Hover Form

Active form

Filled form

Success form

This is a success form validation message!

Error form

This is a error form validation message!

Checkbox

Default checkbox

Checked checkbox

Radio

Default radio

Default checked radio

Editor

Documentation

Starter Kit Codes

Starter Kit Code

<div class="mb-4">
	<label for="example-form-input-sm" class="form-label">Small</label>
	<input type="text" class="form-control form-control-sm" id="example-form-input-sm" placeholder="Small input form">
</div>
<div class="mb-4">
	<label for="example-form-input-md" class="form-label">Medium</label>
	<input type="text" class="form-control" id="example-form-input-md" placeholder="Medium input form">
</div>
<div class="mb-4">
	<label for="example-form-input-lg" class="form-label">Large</label>
	<input type="text" class="form-control form-control-lg" id="example-form-input-lg" placeholder="Large input form">
</div>

Starter Kit Code

<div class="mb-4">
	<label for="example-form-input-group-1" class="form-label">Static</label>
	<div class="input-group">
	  	<span class="input-group-text" id="example-form-input-group-1-addon">@</span>
	  	<input type="text" class="form-control" placeholder="Username" id="example-form-input-group-1" aria-label="Username" aria-describedby="example-form-input-group-1-addon">
	</div>
</div>
<div class="mb-4">
	<div class="input-group">
	  	<input type="email" class="form-control" placeholder="Recipient’s username" id="example-form-input-group-2" aria-label="Recipient’s username" aria-describedby="example-form-input-group-2-addon">
	  	<span class="input-group-text" id="example-form-input-group-2-addon">@email.com</span>
	</div>
</div>
<div class="mb-4">
	<label for="example-form-input-group-3" class="form-label">Buttons</label>
	<div class="input-group">
	  	<input type="email" class="form-control" placeholder="Enter your email" id="example-form-input-group-3" aria-label="Enter your email" aria-describedby="example-form-input-group-3-addon">
  	  	<button class="btn btn-primary" type="button" id="example-form-input-group-3-addon">Button</button>
	</div>
</div>

Starter Kit Code

<div class="mb-4">
	<label for="example-form-input-types-normal" class="form-label">Normal Form</label>
	<input type="text" class="form-control" id="example-form-input-types-normal" placeholder="Enter your text">
</div>
<div class="mb-4">
	<label for="example-form-input-types-help" class="form-label">Helping text</label>
	<input type="text" class="form-control" id="example-form-input-types-help" placeholder="Enter your text">
	<span id="example-form-input-types-help-text" class="form-text">Help text that extends beyond one line and breaks into new lines.</span>
</div>
<div class="mb-4">
	<label for="example-form-input-types-password" class="form-label">Password</label>
	<input type="password" class="form-control" id="example-form-input-types-password" placeholder="Enter your password" value="•••••••••••••••••••">
</div>
<div class="mb-4">
	<label for="example-form-input-types-show-password" class="form-label">Show/Hide Password</label>
	<div class="input-group">
	  	<input type="password" class="form-control" placeholder="Enter your password" id="example-form-input-types-show-password" aria-label="Enter your password" aria-describedby="example-form-input-types-show-password-addon" value="Your password">
  	  	<button class="btn btn-form-icon btn-outline-dark-5" type="button" id="example-form-input-types-show-password-addon" data-toggle="password" data-target="#example-form-input-types-show-password">
  	  		<i class="ic ic-eye"></i>
  	  	</button>
	</div>
</div>
<div class="mb-4">
	<label for="example-form-input-types-textarea" class="form-label">Text Area</label>
	<textarea class="form-control" id="example-form-input-types-textarea" placeholder="Type here..." rows="6"></textarea>
</div>
<div class="mt-4 mb-4 row">
	<div class="col-auto">
		<label for="example-form-input-types-horizontal" class="col-form-label">Horizontal Form</label>
	</div>
	<div class="col">
		<input type="text" class="form-control" id="example-form-input-types-horizontal" placeholder="Enter your text">
	</div>
</div>
<div class="mb-4">
	<label for="example-form-input-types-select" class="form-label">Input Select</label>
	<select class="form-select" aria-label="Form Input Select" id="example-form-input-types-select">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</div>
<div class="mb-4">
	<label for="example-form-input-types-file" class="form-label">Default file input</label>
	<input class="form-control" type="file" id="example-form-input-types-file">
</div>
<div class="mb-4">
	<label for="example-form-input-types-number" class="form-label">Number</label>
	<input type="number" class="form-control" id="example-form-input-types-number" placeholder="0">
</div>

Starter Kit Code

<div class="mb-4">
	<label for="example-form-input-types-date" class="form-label">Date</label>
	<div class="input-group" id="example-form-input-group-types-date" data-td-target-input="nearest" data-td-target-toggle="nearest">
		<input type="text" class="form-control" id="example-form-input-types-date" placeholder="dd/mm/yyyy" readonly="">
		<button class="btn btn-form-icon btn-outline-dark-5" type="button" id="example-form-input-group-types-date-addon" data-td-target="#example-form-input-types-date" data-td-toggle="datetimepicker">
			<i class="ic ic-calendar"></i>
		</button>
	</div>
</div>
<div class="mb-4">
	<label for="example-form-input-types-time" class="form-label">Time</label>
	<div class="input-group" id="example-form-input-group-types-time" data-td-target-input="nearest" data-td-target-toggle="nearest">
		<input type="text" class="form-control" id="example-form-input-types-time" placeholder="-- -- --" readonly="">
		<button class="btn btn-form-icon btn-outline-dark-5" type="button" id="example-form-input-group-types-time-addon" data-td-target="#example-form-input-types-time" data-td-toggle="datetimepicker">
			<i class="ic ic-clock"></i>
		</button>
	</div>
</div>

{% block pluginStyles %}
	<!-- Tempus Dominus Styles -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">
{% endblock %}

{% block pluginScripts %}
	<!-- Popperjs -->
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
	<!-- Tempus Dominus JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
{% endblock %}

{% block appScripts %}
	<script type="text/javascript">
		const datePicker = new tempusDominus.TempusDominus(
			document.getElementById('example-form-input-group-types-date'),
			{
				display: {
					icons: {
						type: 'icons',
						time: 'ic ic-clock',
						date: 'ic ic-calendar',
						up: 'ic ic-arrow-up',
						down: 'ic ic-arrow-down',
						previous: 'ic ic-caret-left',
						next: 'ic ic-caret-right',
						today: 'ic ic-calendar',
						clear: 'ic ic-trash',
						close: 'ic ic-xmark'
					},

					viewMode: 'calendar',
				},
				localization: {
					format: 'dd/MM/yyyy',
				}
			}
		);
		const timePicker = new tempusDominus.TempusDominus(
			document.getElementById('example-form-input-group-types-time'),
			{
				display: {
					icons: {
						type: 'icons',
						time: 'ic ic-clock',
						date: 'ic ic-calendar',
						up: 'ic ic-arrow-up',
						down: 'ic ic-arrow-down',
						previous: 'ic ic-caret-left',
						next: 'ic ic-caret-right',
						today: 'ic ic-calendar',
						clear: 'ic ic-trash',
						close: 'ic ic-xmark'
					},

					viewMode: 'clock',
				},
				localization: {
					format: 'HH:mm:ss',
				}
			}
		);
	</script>
{% endblock %}

Starter Kit Code

<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-blank" class="form-label">Blank Form</label>
		<input type="text" class="form-control" id="example-form-input-states-blank" placeholder="">
	</div>
</div>
<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-hover" class="form-label">Hover Form</label>
		<input type="text" class="form-control is-hover" id="example-form-input-states-hover" placeholder="">
	</div>
</div>
<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-active" class="form-label">Active form</label>
		<input type="text" class="form-control is-focus" id="example-form-input-states-active" placeholder="Enter your text" value="Sample text here">
	</div>
</div>
<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-filled" class="form-label">Filled form</label>
		<input type="text" class="form-control" id="example-form-input-states-filled" placeholder="Enter your text" value="Sample text">
	</div>
</div>
<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-success" class="form-label">Success form</label>
		<input type="text" class="form-control is-valid" id="example-form-input-states-success" placeholder="Enter your text" value="This is success text">
		<div class="valid-feedback">This is a success form validation message! </div>
	</div>
</div>
<div class="col-md-6">
	<div class="mb-4">
		<label for="example-form-input-states-error" class="form-label">Error form</label>
		<input type="text" class="form-control is-invalid" id="example-form-input-states-error" placeholder="Enter your text" value="This is error text">
		<div class="invalid-feedback"><i class="ic ic-warning red"></i> This is a error form validation message! </div>
	</div>
</div>

Starter Kit Code

<div class="mb-3">
	<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="form-checkbox-default">
		<label class="form-check-label" for="form-checkbox-default">
			Default checkbox
		</label>
	</div>
</div>
<div class="mb-3">
	<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="form-checkbox-checked" checked>
		<label class="form-check-label" for="form-checkbox-checked">
			Checked checkbox
		</label>
	</div>
</div>

Starter Kit Code

<div class="mb-3">
	<div class="form-check">
		<input class="form-check-input" type="radio" name="form-radio" id="form-radio-1">
		<label class="form-check-label" for="form-radio-1">
			Default radio
		</label>
	</div>
</div>
<div class="mb-3">
	<div class="form-check">
		<input class="form-check-input" type="radio" name="form-radio" id="form-radio-2" checked>
		<label class="form-check-label" for="form-radio-2">
			Default checked radio
		</label>
	</div>
</div>

Starter Kit Code

<div class="form-tinymce">
	<textarea></textarea>
</div>

{% block pluginScripts %}
	<!-- TinyMCE -->
	<script src="https://cdn.tiny.cloud/1/cin9oxuaomkg13x40h4p31808y3uc8v14wyy3pqtlwr0xrq0/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
{% endblock %}

{% block appScripts %}
	<script type="text/javascript">
		tinymce.init({
			selector: '.form-tinymce textarea',
			menubar: false,
			statusbar: false,
			height: 337,
			plugins: 'lists checklist typography',
			toolbar: 'bold italic underline strikethrough blockquote checklist bullist numlist undo redo',
			tinycomments_mode: 'embedded',
			tinycomments_author: 'Designspace',
			ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
		});
	</script>
{% endblock %}