zoralabFORM Technical Specification - ZORALab's Hestia

The technical specifications to refer when using the package. Easy-going, offline supported (via web PWA installation), and detailed oriented. Courtesy from ZORALab's Hestia.

Product Designs

Designers

This component was designed by the following creators:

(Holloway) Chew, Kean Ho

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

zoralabCORE

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Minimum HTML

The minimum required HTML codes are shown below:

<form method='...' action='...'>
	<fieldset>
		<legend>Category Title</legend>
		<fieldset>
			<label>Field 1</label>
			<input ...>
		</fieldset>


		<fieldset>
			<label>Field 2</label>
			<input ...>
		</fieldset>


		...
	</fieldset>

	...
</form>

Responsive Grid Layout HTML

The responsive grid layout HTML codes are shown below:

<form method='...' action='...'><div class='row'>
	<div class='column'><fieldset>
		<legend>Category Title</legend>


		<div class='row'>
			<div class='column'><fieldset>
				<label>Field 1</label>
				<input ...>
			</fieldset></div>

			<div class='column'><fieldset>
				<label>Field 2</label>
				<input ...>
			</fieldset></div>

			...
		</div>
	</fieldset></div>

	...
</div></form>

Disabled Field HTML

The disabled field HTML codes are shown below:

<input ... disabled />
<textarea ... disabled />...</textarea>
<select ... disabled />...</select>

Autofocus Field HTML

The autofocus field HTML codes are shown below:

<input ... autofocus />
<textarea ... autofocus />...</textarea>
<select ... autofocus />...</select>

Autocomplete Field HTML

The autocomplete field HTML codes are shown below:

<input ... autocomplete />
<textarea ... autocomplete />...</textarea>

Range Limiting Field HTML

The range limiting field HTML codes are shown below:

<input ... min='0' max='100' />

Stepper Field HTML

The value stepping field HTML codes are shown below:

<input ... step='0.05' />

Placeholder Field HTML

The placeholder field HTML codes are shown below:

<input ... placeholder='...' />
<textarea ... placeholder='...'>...</textarea>

Data Recommendation Field HTML

The data recommendation field HTML codes are shown below:

<input ... list='...list-ID1...' />
<datalist id='...list-ID1...'>
	<option value='...' label='...' />
	...
</datalist>

Checkbox Field HTML

The checkbox field HTML codes are shown below:

<!-- MINIMUM -->
<label>
	<input type='checkbox' name='...' />
	<span>...</span>
</label>


<!-- MINIMUM (DEFAULT CHECKED) -->
<label>
	<input type='checkbox' name='...' checked />
	<span>...</span>
</label>


<!-- ALL PROPERTIES -->
<label>
	<input type='checkbox'
		name='...'
		checked
		required
		disabled
		autofocus
	/>
	<span>...</span>
</label>

Colorpicker Field HTML

The colorpicker field HTML codes are shown below:

<!-- MINIMUM -->
<input type='color' id='...INPUT_ID1...' name='...' />


<!-- MINIMUM (DEFAULT VALUE) -->
<input type='color' id='...INPUT_ID1...' name='...' value='#fefefe' />


<!-- ALL PROPERTIES -->
<label for='...INPUT_ID1...'>...</label>
<input type='color'
	id='...INPUT_ID1...'
	name='...'
	value='#fefefe'
	required
	disabled
	autofocus
	autocomplete
	list='...DATALIST_ID1...'
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...'>
	...
</datalist>

Submit Button HTML

The submit button HTML codes are shown below:

<!-- MINIMUM -->
<input type="submit" name="..." value="Submit" />


<!-- ALL PROPERTIES -->
<input type="submit"
	name="submit[type]"
	value="...AN IDENTIFIABLE VALUE..."
	formaction="...OVERRIDE FORM ACTION..."
	formtype="...OVERRIDE FORM SUBMISSION TYPE..."
	formmethod="...OVERRIDE FORM METHOD (GET|POST|dialog|...)"
	formnovalidate="true"
	formtarget="...AN IFRAME ID..."
	disabled
/>

Date Field HTML

The date field HTML codes are shown below:

<!-- MINIMUM -->
<input type='date'
	id='...INPUT_ID1...'
	name='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)'
	placeholder='YYYY-MM-DD'
/>


<!-- MINIMUM (DEFAULT VALUE) -->
<input type='date'
	id='...INPUT_ID1...'
	name='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)'
	placeholder='YYYY-MM-DD'
	value='1985-06-11'
/>


<!-- ALL PROPERTIES -->
<input type="date"
	id="..."
	name="..."
	value="2016-06-01"
	pattern="(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)"
	placeholder='YYYY-MM-DD'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="...DATALIST_ID1..."
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...'>
	...
</datalist>

Local Datetime Field HTML

The local datetime field HTML codes are shown below:

<!-- MINIMUM -->
<input type='datetime-local'
	id='...'
	name='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)'
	placeholder='YYYY-MM-DDThh:mm:ss±hh:mm'
/>


<!-- MINIMUM (DEFAULT VALUE) -->
<input type='datetime-local'
	id='...'
	name='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)'
	placeholder='YYYY-MM-DDThh:mm:ss±hh:mm'
	value='2016-06-01'
/>


<!-- ALL PROPERTIES -->
<input type='datetime-local'
	id='...'
	name='...'
	value='2016-06-01'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)'
	placeholder='YYYY-MM-DDThh:mm:ss±hh:mm'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list='...DATALIST_ID1...'
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...' label='...'>
	...
</datalist>

Email Field HTML

The email field HTML codes are shown below:

<!-- MINIMUM (ACCEPTS: '[email protected]' FORMAT) -->
<input type='email'
	id='...INPUT-ID1...'
	name='...'
	pattern='(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}'
	placeholder='...' />


<!-- MINIMUM (ACCEPTS: 'last.first+nickname@local' FORMAT) -->
<input type='email'
	id='...INPUT-ID1...'
	name='...'
	pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'
	placeholder='...' />


<!-- MINIMUM (ACCEPTS: LOCKED DOMAIN LIKE '[email protected]' FORMAT) -->
<input type='email'
	id='...INPUT-ID1...'
	name='...'
	pattern='(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@zoralab.com'
	placeholder='...' />


<!-- ALL PROPERTIES -->
<label for='...INPUT-ID1...'>...</label>
<input type="email"
	id='...INPUT-ID1...'
	name='...'
	value='...'
	pattern='...'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list='...DATALIST_ID1...'
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...' label='...'>
	...
</datalist>

File Selection Field HTML

The file selection field HTML codes are shown below:

<!-- MINIMUM -->
<label>
	<input type='file'
		id='...INPUT-ID1...'
		name='...'
		accept='...'
	/>
	<span>Button Title Here</span>
</label>


<!-- MINIMUM (FORMAT FILTRATION e.g: all images + .m4a audio + .avi, .mkv, .mp4 video) -->
<label>
	<input type='file'
		id='...INPUT-ID1...'
		name='...'
		accept='image/*,audio/mp4,.avi,.mkv,.mp4'
	/>
	<span>Button Title Here</span>
</label>


<!-- ALL PROPERTIES -->
<label>
	<input type='file'
		id='...INPUT-ID1...'
		name='...'
		accept='...'
		capture
		multiple
		required
		disabled
		autofocus
		autocomplete
	/>
	<span>... BUTTON TITLE ...</span>
</label>

Month Field HTML

The month field HTML codes are shown below:

<!-- MINIMUM -->
<input type='month'
	id='...'
	name='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)'
	placeholder='YYYY-MM'
/>


<!-- RECOMMENDED -->
<!-- Don't use it. Use 'date' instead. Firefox is not ready. -->


<!-- ALL PROPERTIES -->
<input type='month'
	id='...'
	name='...'
	value='...'
	pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)'
	placeholder='YYYY-MM-DD'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="...DATALIST-ID1..."
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...' label='...'>
	...
</datalist>

Number Field HTML

The number field HTML codes are shown below:

<!-- MINIMUM -->
<input type='number'
	id='...INPUT-ID1...'
	name='...'
/>


<!-- RECOMMENDED (Set range & stepper) -->
<input type='number'
	id='...INPUT-ID1...'
	name='...'
	min='0'
	max='100'
	step='0.01'
/>


<!-- ALL PROPERTIES -->
<input type='number'
	id='...INPUT-ID1...'
	name='...'
	value='...'
	min='0'
	max='100'
	step='0.01'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="...DATALIST-ID1..."
/>
<datalist id='...DATALIST_ID1...'>
	<option value='...' label='...'>
	...
</datalist>

Password Field HTML

The password field HTML codes are shown below:

<!-- MINIMUM (1 'a-z' and 1 'A-Z'; 1 '0-9'; 1 SYMBOL; 8-16 CHARS) -->
<input type='password'
	id='...INPUT-ID1...'
	name='...'
	pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{8,16}'
/>


<!-- RECOMMENDED (1 'a-z' and 1 'A-Z'; 1 '0-9'; 1 SYMBOL; >= 33 CHARS) -->
<!-- WHY: ASK USER TO USE PASSWORD BANK LIKE BITWARDEN FOR SAFER COMMUNITY -->
<input type='password'
	id='...INPUT-ID1...'
	name='...'
	pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{33,}'
	minlength='33'
	placeholder='Password Here'
/>


<!-- ALL PROPERTIES -->
<label for='...INPUT-ID1...'>...</label>
<input type='password'
	id='...INPUT-ID1...'
	name='...'
	pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{33,}'
	minlength='33'
	maxlength='...'
	placeholder='Password Here'
	required
	disabled
	autofocus
	readonly
/>

Radio Field HTML

The radio field HTML codes are shown below:

<!-- MINIMUM -->
<label>
	<input type='radio' name='...DECISION_A...' value='...CHOICE_1...' />
	<span>...LABEL SHOWCASE HERE...</span>
</label>


<!-- MINIMUM (DEFAULT: CHECKED) -->
<label>
	<input type='radio' name='...DECISION_A...' value='...CHOICE_2...' checked />
	<span>...LABEL SHOWCASE HERE...</span>
</label>


<!-- ALL PROPERTIES -->
<label>
	<input type='radio'
		id='...'
		name='...SAME NAME MEANS SAME GROUP OF CHOICES...'
		value='...CHOICE...'
		checked
		required
		disabled
		autofocus
	/>
	<span>...LABEL SHOWCASE HERE...</span>
</label>

Select Field HTML

The select field HTML codes are shown below:

<!-- MINIMUM -->
<select id='...INPUT-ID1...' name='...' size='5'>
	<option value='...'>...</option>
	<option value='...'>...</option>
	...
</select>


<!-- MINIMUM (DEFAULT: SELECTED) -->
<select id='...INPUT-ID1...' name='...' size='5'>
	<option value='...' selected>...</option>
	...
</select>


<!-- MINIMUM (MULTIPLE SELECTIONS) -->
<select id='...INPUT-ID1...' name='...' size='5' multiple>
	...
</select>


<!-- RECOMMENDED (USE OPTGROUP) -->
<select id='...INPUT-ID1...' name='...' size='5'>
	<optgroup label='...'>
		<option value='...'>...</option>
		<option value='...'>...</option>
		...
	</optgroup>


	<optgroup label='...'>
		<option value='...'>...</option>
		<option value='...'>...</option>
		...
	</optgroup>


	...
</select>


<!-- ALL PROPERTIES -->
<select id='...INPUT-ID1...'
	name='...'
	autocomplete
	multiple
	required
	disabled
	autofocus
	size='...DISPLAY SIZE...'
>
	<optgroup label='...'>
		<option value='...' selected>...</option>

		...
	</optgroup>

	...
</select>

Text Field HTML

The text field HTML codes are shown below:

<!-- MINIMUM -->
<input type='text'
	id='...'
	name='...'
	spellcheck />


<!-- ALL PROPERTIES -->
<input type='text'
	id='...'
	name='...'
	value='...'
	pattern='...'
	minlength='...'
	maxlength='...'
	spellcheck
	placeholder='...'
	required
	autofocus
	autocomplete
	readonly
	list='...datalist-ID1...'
/>
<datalist id='...datalist-ID1...'>
	<option value='...' label='...' />
</datalist>

Textarea Field HTML

The textarea field HTML codes are shown below:

<!-- MINIMUM -->
<textarea id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	rows='10'
	wrap='hard'
	spellcheck></textarea>


<!-- ALL PROPERTIES -->
<textarea id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	cols='...'
	rows='...'
	wrap='hard'
	minlength='...'
	maxlength='...'
	spellcheck
	required
	disabled
	autofocus
	autocomplete
	readonly
>
	...
</textarea>

Time Field HTML

The time field HTML codes are shown below:

<!-- MINIMUM -->
<input type='time' id='...INPUT-ID1...' name='...' />


<!-- MINIMUM (SET RANGE) -->
<input type='time' id='...INPUT-ID1...' name='...' min='05:00' max='23:00' />


<!-- ALL PROPERTIES -->
<input type='time'
	id='...INPUT-ID1...'
	name='...'
	value='...'
	min='...'
	max='...'
	required
	disabled
	autofocus
	autocomplete
	readonly
/>

URL Field HTML

The url field HTML codes are shown below:

<!-- MINIMUM -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	pattern='...' />


<!-- MINIMUM (HTTPS ONLY) -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	pattern='(https)(:\/\/)([a-zA-Z]?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?' />


<!-- MINIMUM (HTTP/HTTPS ONLY) -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	pattern='(http(s?))(:\/\/)([a-zA-Z]?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?' />


<!-- MINIMUM (TEL ONLY - 'tel:+XXXX...' OR 'tel:00XXXX...' ) -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	pattern='(tel)(:\/\/)(\+?)([0-9\-_]+)' />


<!-- MINIMUM (EMAIL ONLY - 'mailto://[email protected]' OR 'mailto://xxx@local') -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	placeholder='...'
	pattern='(mailto)(:\/\/)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+)@([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)' />


<!-- ALL PROPERTIES -->
<input type='url'
	id='...INPUT-ID1...'
	name='...'
	pattern='...'
	placeholder='...'
	value='...'
	minlength='...'
	maxlength='...'
	spellcheck
	required
	disabled
	autofocus
	autocomplete
	readonly
	list='...datalist-ID1...'
/>
<datalist id='...datalist-ID1...'>
	<option value='...' label='...' />
</datalist>

Week Field HTML

The week field HTML codes are shown below:

<!-- MINIMUM -->
<input type='week'
	id='...'
	name='...'
	pattern='(?:^\d*\-W(?:([0-4][0-9])|5[0-2]))'
	placeholder='YYYY-Wnn'
/>


<!-- RECOMMENDED -->
<!-- Don't use it. Use 'date' instead. Firefox is not ready. -->


<!-- ALL PROPERTIES -->
<input type='week'
	id='...'
	name='...'
	pattern='(?:^\d*\-W(?:([0-4][0-9])|5[0-2]))'
	placeholder='YYYY-Wnn'
	value='...'
	min='...'
	max='...'
	required
	disabled
	autofocus
	autocomplete
	readonly
	list='...datalist-ID1...'
/>
<datalist id='...datalist-ID1...'>
	<option value='...' label='...' />
	...
</datalist>

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Margin

Affects the margin of the rendered component.

VARIABLE     : --form-margin
CSS PROPERTY : margin
DEFAULT      : 2rem auto (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --form-padding
CSS PROPERTY : padding
DEFAULT      : .5rem (>= v1.2.0)

Toggle Spacing

Affects the toggle spacing of the rendered component.

VARIABLE     : --form-toggle-spacing
CSS PROPERTY : column-gap
DEFAULT      : 1rem (>= v1.2.0)

Min-Width

Affects the minimum width of the rendered component.

VARIABLE     : --form-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Width

Affects the width of the rendered component.

VARIABLE     : --form-width
CSS PROPERTY : width
DEFAULT      : auto (>= v1.2.0)

Max-Width

Affects the maximum width of the rendered component.

VARIABLE     : --form-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height

Affects the minimum height of the rendered component.

VARIABLE     : --form-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height

Affects the height of the rendered component.

VARIABLE     : --form-height
CSS PROPERTY : height
DEFAULT      : auto (>= v1.2.0)

Max-Height

Affects the maximum height of the rendered component.

VARIABLE     : --form-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --form-color
CSS PROPERTY : color
DEFAULT      : var(--body-color) (>= v1.2.0)

Color (Inverted)

Affects the color of the rendered component while in inverted mode.

VARIABLE     : --form-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--body-color-inverted) (>= v1.2.0)

Color (Primary)

Affects the primary color of the rendered component.

VARIABLE     : --form-color-primary
CSS PROPERTY : color
DEFAULT      : var(--color-primary-400) (>= v1.2.0)

Color (Primary + Inverted)

Affects the primary color of the rendered component while in inverted mode.

VARIABLE     : --form-color-primary-inverted
CSS PROPERTY : color
DEFAULT      : var(--color-primary-300) (>= v1.2.0)

Color (Valid)

Affects the valid value's color of the rendered component.

VARIABLE     : --form-color-valid
CSS PROPERTY : color
DEFAULT      : var(--body-color-indicator-green) (>= v1.2.0)

Color (Invalid)

Affects the invalid value's color of the rendered component.

VARIABLE     : --form-color-invalid
CSS PROPERTY : color
DEFAULT      : var(--body-color-indicator-red) (>= v1.2.0)

Color (Focused)

Affects the color of the rendered component when being focused.

VARIABLE     : --form-color-focus
CSS PROPERTY : color
DEFAULT      : var(--color-primary-400) (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component during print mode.

VARIABLE     : --form-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --form-background
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Background (Inverted)

Affects the background of the rendered component while in inverted mode.

VARIABLE     : --form-background-inverted
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Background (Valid)

Affects the valid value's background of the rendered component.

VARIABLE     : --form-background-valid
CSS PROPERTY : background
DEFAULT      : var(--body-background-indicator-green) (>= v1.2.0)

Background (Invalid)

Affects the invalid value's background of the rendered component.

VARIABLE     : --form-background-invalid
CSS PROPERTY : background
DEFAULT      : var(--body-background-indicator-red) (>= v1.2.0)

Background (Focused)

Affects the background of the rendered component when being focused.

VARIABLE     : --form-background-focus
CSS PROPERTY : background
DEFAULT      : var(--body-background-indicator-yellow) (>= v1.2.0)

Background (Print Mode)

Affects the background of the rendered component during print mode.

VARIABLE     : --form-background-print
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Box Shadow

Affects the shadow of the rendered component.

VARIABLE     : --form-box-shadow
CSS PROPERTY : box-shadow
DEFAULT      : 0 .5rem 1rem var(--form-color) (>= v1.2.0)

Box Shadow (Inverted)

Affects the shadow of the rendered component while in inverted mode.

VARIABLE     : --form-box-shadow-inverted
CSS PROPERTY : box-shadow
DEFAULT      : 0 .5rem 1rem var(--form-color-inverted) (>= v1.2.0)

Timing

Affects the animation timing of the rendered component.

VARIABLE     : --form-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-normal) (>= v1.2.0)

Margin (Fieldset)

Affects the fieldset's margin of the rendered component.

VARIABLE     : --form-fieldset-margin
CSS PROPERTY : margin
DEFAULT      : 1rem (>= v1.2.0)

Padding (Fieldset)

Affects the fieldset's padding of the rendered component.

VARIABLE     : --form-fieldset-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Min-Width (Fieldset)

Affects the fieldset's minimum width of the rendered component.

VARIABLE     : --form-fieldset-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Width (Fieldset)

Affects the fieldset's width of the rendered component.

VARIABLE     : --form-fieldset-width
CSS PROPERTY : width
DEFAULT      : auto (>= v1.2.0)

Max-Width (Fieldset)

Affects the fieldset's maximum width of the rendered component.

VARIABLE     : --form-fieldset-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height (Fieldset)

Affects the fieldset's minimum height of the rendered component.

VARIABLE     : --form-fieldset-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height (Fieldset)

Affects the fieldset's height of the rendered component.

VARIABLE     : --form-fieldset-height
CSS PROPERTY : height
DEFAULT      : auto (>= v1.2.0)

Max-Height (Fieldset)

Affects the fieldset's maximum height of the rendered component.

VARIABLE     : --form-fieldset-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Border (Fieldset)

Affects the fieldset's border of the rendered component.

VARIABLE     : --form-fieldset-border
CSS PROPERTY : border
DEFAULT      : none (>= v1.2.0)

Border Radius (Fieldset)

Affects the border radius of the rendered component.

VARIABLE     : --form-fieldset-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .5rem (>= v1.2.0)

Margin (Legend)

Affects the fieldset's legend's margin of the rendered component.

VARIABLE     : --form-fieldset-legend-margin
CSS PROPERTY : margin
DEFAULT      : 2rem (>= v1.2.0)

Font Size (Legend)

Affects the fieldset's legend's font size of the rendered component.

VARIABLE     : --form-fieldset-legend-font-size
CSS PROPERTY : font-size
DEFAULT      : 2rem (>= v1.2.0)

Font Weight (Legend)

Affects the fieldset's legend's font weight of the rendered component.

VARIABLE     : --font-fieldset-legend-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 700 (>= v1.2.0)

Text Transformation (Legend)

Affects the fieldset's legend's text transformation of the rendered component.

VARIABLE     : --form-fieldset-legend-text-transform
CSS PROPERTY : text-transform
DEFAULT      : uppercase (>= v1.2.0)

Text Align (Legend)

Affects the fieldset's legend's text alignment of the rendered component.

VARIABLE     : --form-fieldset-legend-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Display (Label)

Affects the label's display mode of the rendered component.

VARIABLE     : --form-label-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Min-Width (Label)

Affects the label's minimum width of the rendered component.

VARIABLE     : --form-label-min-width
CSS PROPERTY : min-width
DEFAULT      : 5rem (>= v1.2.0)

Width (Label)

Affects the label's width of the rendered component.

VARIABLE     : --form-label-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Max-Width (Label)

Affects the label's maximum width of the rendered component.

VARIABLE     : --form-label-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height (Label)

Affects the label's minimum height of the rendered component.

VARIABLE     : --form-label-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height (Label)

Affects the label's height of the rendered component.

VARIABLE     : --form-label-height
CSS PROPERTY : height
DEFAULT      : max-content (>= v1.2.0)

Max-Height (Label)

Affects the maximum height of the rendered component.

VARIABLE     : --form-label-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Margin (Label)

Affects the label's margin of the rendered component.

VARIABLE     : --form-label-margin
CSS PROPERTY : margin
DEFAULT      : 0 auto (>= v1.2.0)

Padding (Label)

Affects the label's padding of the rendered component.

VARIABLE     : --form-label-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Font Size (Label)

Affects the label's font size of the rendered component.

VARIABLE     : --form-label-font-size
CSS PROPERTY : font-size
DEFAULT      : 1.6rem (>= v1.2.0)

Font Style (Label)

Affects the label's font styling of the rendered component.

VARIABLE     : --form-label-font-style
CSS PROPERTY : font-style
DEFAULT      : normal (>= v1.2.0)

Font Weight (Label)

Affects the label's font weight of the rendered component.

VARIABLE     : --form-label-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 700 (>= v1.2.0)

Text Transformation (Label)

Affects the label's text transformation of the rendered component.

VARIABLE     : --form-label-text-transform
CSS PROPERTY : text-transform
DEFAULT      : titlecase (>= v1.2.0)

Text Align (Label)

Affects the label's text alignment of the rendered component.

VARIABLE     : --form-label-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Display (Field)

Affects the field's display mode of the rendered component.

VARIABLE     : --form-field-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Opacity (Field)

Affects the field's opacity of the rendered component.

VARIABLE     : --form-field-opacity
CSS PROPERTY : opacity
DEFAULT      : 1 (>= v1.2.0)

Opacity (Field + Disabled)

Affects the field's opacity of the rendered component when disabled.

VARIABLE     : --form-field-opacity-disabled
CSS PROPERTY : opacity
DEFAULT      : .3 (>= v1.2.0)

Margin (Field)

Affects the field's margin of the rendered component.

VARIABLE     : --form-field-margin
CSS PROPERTY : margin
DEFAULT      : 0 auto (>= v1.2.0)

Padding (Field)

Affects the field's padding of the rendered component.

VARIABLE     : --form-field-padding
CSS PROPERTY : padding
DEFAULT      : 1rem (>= v1.2.0)

Min-Width (Field)

Affects the field's minimum width of the rendered component.

VARIABLE     : --form-field-min-width
CSS PROPERTY : min-width
DEFAULT      : 5rem (>= v1.2.0)

Width (Field)

Affects the field's width of the rendered component.

VARIABLE     : --form-field-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Max-Width (Field)

Affects the field's maximum width of the rendered component.

VARIABLE     : --form-field-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height (Field)

Affects the field's minimum height of the rendered component.

VARIABLE     : --form-field-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height (Field)

Affects the field's height of the rendered component.

VARIABLE     : --form-height
CSS PROPERTY : height
DEFAULT      : initial (>= v1.2.0)

Max-Height (Field)

Affects the maximum height of the rendered component.

VARIABLE     : --form-field-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Border (Field)

Affects the field's border of the rendered component.

VARIABLE     : --form-field-border
CSS PROPERTY : border
DEFAULT      : 2px solid currentColor (>= v1.2.0)

Border Radius (Field)

Affects the field's border radius of the rendered component.

VARIABLE     : --form-field-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .2rem (>= v1.2.0)

Font Family (Field)

Affects the field's font family of the rendered component.

VARIABLE     : --form-field-font-family
CSS PROPERTY : font-family
DEFAULT      : var(--body-font-family) (>= v1.2.0)

Font Size (Field)

Affects the field's font size of the rendered component.

VARIABLE     : --form-field-font-size
CSS PROPERTY : font-size
DEFAULT      : var(--body-font-size) (>= v1.2.0)

Font Style (Field)

Affects the field's font styling of the rendered component.

VARIABLE     : --form-field-font-style
CSS PROPERTY : font-style
DEFAULT      : normal (>= v1.2.0)

Font Style (Field + Placeholder)

Affects the field's placeholder's font styling of the rendered component.

VARIABLE     : --form-field-placeholder-font-style
CSS PROPERTY : font-style
DEFAULT      : italic (>= v1.2.0)

Font Weight (Field)

Affects the field's font weight of the rendered component.

VARIABLE     : --form-field-font-weight
CSS PROPERTY : font-weight
DEFAULT      : initial (>= v1.2.0)

Text Transformation (Field)

Affects the field's text transformation of the rendered component.

VARIABLE     : --form-field-text-transform
CSS PROPERTY : text-transform
DEFAULT      : initial (>= v1.2.0)

Text Align (Field)

Affects the field's text alignment of the rendered component.

VARIABLE     : --form-field-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Margin (Option Group)

Affects the option group's margin of the rendered component.

VARIABLE     : --form-optgroup-margin
CSS PROPERTY : margin
DEFAULT      : 2rem 1rem 0 (>= v1.2.0)

Padding (Option Group)

Affects the option group's padding of the rendered component.

VARIABLE     : --form-optgroup-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Font Style (Option Group)

Affects the option group's font styling of the rendered component.

VARIABLE     : --form-optgroup-font-style
CSS PROPERTY : font-style
DEFAULT      : italic (>= v1.2.0)

Text Align (Option Group)

Affects the option group's text alignment of the rendered component.

VARIABLE     : --form-optgroup-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Padding (Option)

Affects the option's padding of the rendered component.

VARIABLE     : --form-option-padding
CSS PROPERTY : padding
DEFAULT      : 0 0 0 1.5rem (>= v1.2.0)

Font Style (Option)

Affects the label's font styling of the rendered component.

VARIABLE     : --form-option-font-style
CSS PROPERTY : font-style
DEFAULT      : normal (>= v1.2.0)

Text Align (Option)

Affects the option group's text alignment of the rendered component.

VARIABLE     : --form-optgroup-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Padding (Color Picker)

Affects the color picker's padding of the rendered component.

VARIABLE     : --form-color-picker-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Width (Color Picker)

Affects the color picker's width of the rendered component.

VARIABLE     : --form-color-picker-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Height (Color Picker)

Affects the color picker's height of the rendered component.

VARIABLE     : --form-color-picker-height
CSS PROPERTY : height
DEFAULT      : 5rem (>= v1.2.0)

Margin (Switchbox)

Affects the switchbox's margin of the rendered component.

VARIABLE     : --form-switchbox-margin
CSS PROPERTY : margin
DEFAULT      : 1rem 0 (>= v1.2.0)

Width (Switchbox Toggle)

Affects the switchbox toggle's width of the rendered component.

VARIABLE     : --form-switchbox-toggle-width
CSS PROPERTY : width
DEFAULT      : 70px (>= v1.2.0)

Background (Switchbox Off Mode)

Affects the switchbox's background of the rendered component in off mode.

VARIABLE     : --form-switchbox-background-off
CSS PROPERTY : background
DEFAULT      : #a8a8a8 (>= v1.2.0)

Background (Switchbox On Mode)

Affects the switchbox's background of the rendered component in on mode.

VARIABLE     : --form-switchbox-background-on
CSS PROPERTY : background
DEFAULT      : var(--form-color-valid) (>= v1.2.0)

Timing (Switchbox)

Affects the switchbox's animation timing of the rendered component.

VARIABLE     : --form-switchbox-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-normal) (>= v1.2.0)

Width (Radio Toggle)

Affects the radio toggle's width of the rendered component.

VARIABLE     : --form-radio-toggle-width
CSS PROPERTY : width
DEFAULT      : 30px (>= v1.2.0)

Timing (Radio)

Affects the radio's animation timing of the rendered component.

VARIABLE     : --form-radio-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-normal) (>= v1.2.0)

Display (Button)

Affects the button's display mode of the rendered component.

VARIABLE     : --form-button-display
CSS PROPERTY : display
DEFAULT      : inline-block (>= v1.2.0)

Margin (Button)

Affects the button's margin of the rendered component.

VARIABLE     : --form-button-margin
CSS PROPERTY : margin
DEFAULT      : .5rem 1.2rem (>= v1.2.0)

Padding (Button)

Affects the button's padding of the rendered component.

VARIABLE     : --form-button-padding
CSS PROPERTY : padding
DEFAULT      : 1.3rem (>= v1.2.0)

Width (Button)

Affects the button's width of the rendered component.

VARIABLE     : --form-button-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Border (Button)

Affects the button's border of the rendered component.

VARIABLE     : --form-button-border
CSS PROPERTY : border
DEFAULT      : 2px solid currentColor (>= v1.2.0)

Border Radius (Button)

Affects the button's border radius of the rendered component.

VARIABLE     : --form-button-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .5rem (>= v1.2.0)

Font Weight (Button)

Affects the button's font weight of the rendered component.

VARIABLE     : --font-button-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 700 (>= v1.2.0)

Text Transformation (Button)

Affects the button's text transformation of the rendered component.

VARIABLE     : --form-button-text-transform
CSS PROPERTY : text-transform
DEFAULT      : uppercase (>= v1.2.0)

Text Align (Button)

Affects the button's text alignment of the rendered component.

VARIABLE     : --form-button-text-align
CSS PROPERTY : text-align
DEFAULT      : center (>= v1.2.0)

Timing (Button)

Affects the button's animation timing of the rendered component.

VARIABLE     : --form-button-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-rapid) (>= v1.2.0)

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

Constants

This package does not offer any constant value.

Variables

This package does not offer any variable.

Offered Functions

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabFORM/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>

Data Types

This package does not offer any data type.

Epilogue

Looks like we have arrived to the last station. Intrigued to get in touch? Please feel free to start contacting us via the following public channels:

GitHub Discussion Portal

zoralabFORM Technical Specification - ZORALab's Hestia

Objectives and Purposes

Main Purpose

Legacy Recording

Product Designs

Designers

Dependencies

HTML

Minimum HTML

Responsive Grid Layout HTML

Disabled Field HTML

Autofocus Field HTML

Autocomplete Field HTML

Range Limiting Field HTML

Stepper Field HTML

Placeholder Field HTML

Data Recommendation Field HTML

Checkbox Field HTML

Colorpicker Field HTML

Submit Button HTML

Date Field HTML

Local Datetime Field HTML

Email Field HTML

File Selection Field HTML

Month Field HTML

Number Field HTML

Password Field HTML

Radio Field HTML

Select Field HTML

Text Field HTML

Textarea Field HTML

Time Field HTML

URL Field HTML

Week Field HTML

CSS

Margin

Padding

Toggle Spacing

Min-Width

Width

Max-Width

Min-Height

Height

Max-Height

Color

Color (Inverted)

Color (Primary)

Color (Primary + Inverted)

Color (Valid)

Color (Invalid)

Color (Focused)

Color (Print Mode)

Background

Background (Inverted)

Background (Valid)

Background (Invalid)

Background (Focused)

Background (Print Mode)

Box Shadow

Box Shadow (Inverted)

Timing

Margin (Fieldset)

Padding (Fieldset)

Min-Width (Fieldset)

Width (Fieldset)

Max-Width (Fieldset)

Min-Height (Fieldset)

Height (Fieldset)

Max-Height (Fieldset)

Border (Fieldset)

Border Radius (Fieldset)

Margin (Legend)

Font Size (Legend)

Font Weight (Legend)

Text Transformation (Legend)

Text Align (Legend)

Display (Label)

Min-Width (Label)

Width (Label)

Max-Width (Label)