Skip to main content

Form Fields

Form fields take and validate inputs the user in a context of a form, or simple querying.

Usage

HTML

<label class="hs-form-field">
<span class="hs-form-field__label">Form Field Label</span>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..." />
</label>

SCSS/CSS

@use 'node_modules/@devprotocol/hashi';
@use 'node_modules/@devprotocol/hashi/hs-form-field';

@include hashi.init {
@include hs-form-field.render();
}

Outlined Form Field

By default, the form field is styled using the outlined style. This doesn't provide emphasis differentiation, just stylistic choices.

<label class="hs-form-field">
<span class="hs-form-field__label">Form Field Label</span>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..." />
<span class="hs-form-field__helper">Helper text</span>
</label>

Filled Form Field

You can modify the form field style to be in the filled style by adding the .is-filled class to the parent's class list.

<label class="hs-form-field is-filled">
<span class="hs-form-field__label">Form Field Label</span>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..." />
<span class="hs-form-field__helper">Helper text</span>
</label>
Choosing form field styles

Form field styles must be consistent in every form. Contextually, a webpage has many forms; It can be in the form of a search field, or a contact form. Generally, you can only select one style per form. For example, in the contact form you can only limit the field's style to the outlined style, and in the search field you only limit it to the filled style.

Required Fields

To make a field required, attach a .is-required class to the parent element class list.

<label class="hs-form-field is-required">
<span class="hs-form-field__label">Form Field Label</span>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..." />
<span class="hs-form-field__helper">Helper text</span>
</label>

Helper Texts

Helper texts provide additional context to what is being asked of the user.

Helper texts can also be used for error messages during form validation.

<label class="hs-form-field">
<span class="hs-form-field__label">Form Field Label</span>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..." />
<span class="hs-form-field__helper">Helper text</span>
</label>

Form Field Icons

The position of the form field icon is dependent on putting a class name after the .hs-form-field__icon class.

By default, icons are on the trailing icon position. You can modify it to become a leading icon by attaching .is-leading in the icon element class list.

To use icons, place an SVG inside the .hs-form-field__icon element.

The class names inside brackets are only for emphasis, not to be used in the actual implementation.

<label class="hs-form-field is-required is-filled">
<span class="hs-form-field__label">Form Field Label</span>
<i class="hs-form-field__icon">
<!-- Icon SVG -->
</i>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..."/>
<span class="hs-form-field__helper">Helper text</span>
</label>

<!-- Leading Icon -->
<label class="hs-form-field is-required is-filled">
<span class="hs-form-field__label">Form Field Label</span>
<i class="hs-form-field__icon [is-leading]">
<!-- Icon SVG -->
</i>
<input class="hs-form-field__input" type="text" placeholder="Placeholder..."/>
<span class="hs-form-field__helper">Helper text</span>
</label>

API

CSS Classes

These are used to structure, extend, and modify the styles of a component on the markup.

Anatomical Classes

These classes make up the elements inside a component.

ClassEffect
.hs-form-fieldMain form field class.
.hs-form-field__labelThe form field's label class.
.hs-form-field__inputThe form field's main input class.
.hs-form-field__iconThe form field's icon class.
.hs-form-field__helperThe form field's helper text class.

Variant Classes

For information on how to use these classes, click here.

ClassEffect
.is-raisedRenders the component in its raised style.
.is-errorRenders the component in its error state.
.is-leadingRenders the component's icon in its leading style.

Custom Properties

These are for creating your own component theme classes that you can append to the parent element markup.

PropertyEffect
--hs-form-field-inkChanges the form field's text color.
--hs-form-field-label-inkChanges the form field label's text color.
--hs-form-field-helper-inkChanges the form field helper's text color.
--hs-form-field-borderChanges the form field's border color.
--hs-form-field-radiusChanges the form field's border radius.
--hs-form-field-paddingChanges the form field's padding.
--hs-form-field-shadowChanges the form field's shadow.
--hs-form-field-sizeChanges the form field's text size.
--hs-form-field-label-sizeChanges the form field's label size.
--hs-form-field-helper-sizeChanges the form field's helper size.
--hs-form-field-weightChanges the form field's text weight.
--hs-form-field-label-weightChanges the form field's label weight.
--hs-form-field-helper-weightChanges the form field's helper weight.

Example

.my-form-field-theme {
--hs-form-field-fill: #232323;
--hs-form-field-ink: lime;
--hs-form-field-border: var(--hs-form-field-fill);

&:hover {
--hs-form-field-fill: #353535;
}

&:active {
--hs-form-field-fill: #535353;
}
}

Configuring styles

Here are all the themeable properties for this component. The directions to use these properties are located in the render API.

$fill: 'surface-200' !default;
$fill-disabled: 'disabled' !default;
$ink: 'surface-ink' !default;
$ink-disabled: 'disabled-ink' !default;
$border: 'primary-200' !default;
$border-focus: 'accent-400' !default;
$border-disabled: 'disabled' !default;

$radius: 'small' !default;
$padding: ('sm' 'md') !default;
$border-width: 1px !default;
$border-style: solid !default;

$family: 'body' !default;
$size: 'body' !default;
$weight: 'normal' !default;
$line-height: 'normal' !default;

$label-ink: 'surface-ink' !default;
$helper-ink: 'surface-ink' !default;

Extending styles

If you wish to extend the component styles, the extend() API might come in handy.