Form Input Provides input for text, textarea, validation and more.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                form: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input type="text" class="form-control">
NameDescription
.form-floatingCan wrap form elements to apply form floating style.
.form-control-icon-leftCan wrap form elements to add an icon to the left side of the input
.form-control-icon-rightCan wrap form elements to add an icon to the right side of the input
.input-groupCan wrap form elements to create an input group with labels.
.input-group > .input-group-textBase class of the group text element.
.input-group > .input-group-text.input-group-text-subtleApplies subtle style to the grouped input text.
.form-controlApplies style to inputs elements like <input> and <textarea>.
.form-control.is-valid, .form-select.is-validApplies valid indication to form elements such as input, select and textarea
.form-control.is-invalid, .form-select.is-invalidApplies valid indication to form elements such as input, select and textarea
.form-control.form-control-plaintextApplies plaintext style to the input element
.form-control.form-control-colorApplies style to input of type color.
.form-control.form-control-{xsm, sm, lg}Applies a certain size to form element of type input, for example form-control-sm
.form-selectApplies style to select boxes.
.form-select.form-select-{xsm, sm, lg}Applies a certain size to form element of type select, for example form-select-sm
Customize variables at:/library/extend/components/_form.scss
Component's defaults:/library/components/form/_defaults.scss
NameDefault valueNote
$form-text-margin-top.25rem
$form-text-font-size$small-font-size
$form-text-font-stylenull
$form-text-font-weightnull
$form-text-color$text-muted
$form-label-margin-bottom.5rem
$form-label-font-sizenull
$form-label-font-stylenull
$form-label-font-weightnull
$form-label-colornull
$input-padding-y.532rem
$input-padding-x.75rem
$input-font-familynull
$input-font-size$font-size-base
$input-font-weight$font-weight-normal
$input-line-height1.5
$input-border-radius$border-radius
$input-border-width1px
$input-height-border$input-border-width * 2
$input-heightadd($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false))
$input-height-inneradd($input-line-height * 1em, $input-padding-y * 2)
$input-height-inner-halfadd($input-line-height * .5em, $input-padding-y)
$input-height-inner-quarteradd($input-line-height * .25em, $input-padding-y / 2)
$input-transitionborder-color .15s ease-in-out, box-shadow .15s ease-in-out
$input-icon-size22px;
$input-placeholder-colorproperty.get(form-input-placeholder-color)Requires @use "@library/sass/modules/property";
$input-padding-y-lg0.688rem
$input-padding-x-lg1rem
$input-font-size-lg$font-size-lg
$input-border-radius-lg$border-radius-lg
$input-height-lgadd($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false))
$input-icon-size-lg26px;
$input-padding-y-sm0.282rem
$input-padding-x-sm.75rem
$input-font-size-sm$font-size-sm
$input-border-radius-sm$border-radius-sm
$input-height-smadd($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false))
$input-icon-size-sm18px;
$input-padding-y-xsm0.125rem
$input-padding-x-xsm0.5rem
$input-font-size-xsm$font-size-xsm
$input-border-radius-xsm$border-radius-xsm
$input-height-xsmadd($input-line-height * 1em, add($input-padding-y-xsm * 2, $input-height-border, false))
$input-line-height-xsm1.5;
$input-icon-size-xsm12px;
$input-bgproperty.get(form-input-bg)Requires @use "@library/sass/modules/property";
$input-colorproperty.get(form-input-text-color)Requires @use "@library/sass/modules/property";
$input-border-colorproperty.get(form-input-border)Requires @use "@library/sass/modules/property";
$input-box-shadow0 0 0 0 transparent
$input-plaintext-color$input-color
$input-disabled-bgproperty.get(form-input-disabled-bg)Requires @use "@library/sass/modules/property";
$input-disabled-colorproperty.get(form-input-disabled-text-color)Requires @use "@library/sass/modules/property";
$input-disabled-border-colornull
$input-hover-bgproperty.get(form-input-hover-bg)Requires @use "@library/sass/modules/property";
$input-hover-border-colorproperty.get(form-input-hover-border)Requires @use "@library/sass/modules/property";
$input-hover-colorproperty.get(form-input-hover-text-color)Requires @use "@library/sass/modules/property";
$input-hover-box-shadowproperty.get(form-input-hover-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-bgproperty.get(form-input-focus-bg)Requires @use "@library/sass/modules/property";
$input-focus-border-colorproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$input-focus-colorproperty.get(form-input-focus-text-color)Requires @use "@library/sass/modules/property";
$input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$input-focus-width.25rem
$input-group-addon-padding-y$input-padding-y
$input-group-addon-padding-x$input-padding-x
$input-group-addon-font-weight$input-font-weight
$input-group-addon-colorproperty.get(form-input-group-text-color)Requires @use "@library/sass/modules/property";
$input-group-addon-border-colorproperty.get(form-input-group-text-border-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-colorproperty.get(form-input-group-text-subtle-color)Requires @use "@library/sass/modules/property";
$input-group-addon-subtle-border-colorproperty.get(form-input-group-text-subtle-border-color)Requires @use "@library/sass/modules/property";
$form-check-input-width1em
$form-check-min-height$font-size-base * $line-height-base
$form-check-padding-start$form-check-input-width + .5em
$form-check-margin-bottom.125rem
$form-check-label-colornull
$form-check-label-cursornull
$form-check-transitionbackground-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-check-input-active-filterbrightness(90%)
$form-check-input-bgtransparent
$form-check-input-border2px solid property.get(ui-base-color-6)Requires @use "@library/sass/modules/property";
$form-check-input-border-radius2px
$form-check-radio-border-radius50%
$form-check-input-hover-borderproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-focus-border$input-focus-border-color
$form-check-input-focus-box-shadow0 0 0 .25rem property.get(form-input-focus-box-shadow)Requires @use "@library/sass/modules/property";
$form-check-input-checked-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-checked-border-color$form-check-input-checked-bg-color
$form-check-input-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.62818 14.6338C7.21344 15.1221 6.54349 15.1221 6.12875 14.6338L2.31105 10.1393C1.89632 9.65102 1.89632 8.86229 2.31105 8.37402C2.72579 7.88576 3.39575 7.88576 3.81048 8.37402L6.87315 11.9797L14.1895 3.3662C14.6043 2.87793 15.2742 2.87793 15.6889 3.3662C16.1037 3.85446 16.1037 4.64319 15.6889 5.13146L7.62818 14.6338Z" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(default, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-radio-checked-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z" fill="none" stroke="#{theme.get(alt, true, main-background-color)}" stroke-width="3"/></svg>')Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$form-check-input-indeterminate-border-color$form-check-input-indeterminate-bg-color
$form-check-input-indeterminate-bg-imageurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(default, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-indeterminate-bg-image-alturl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{theme.get(alt, true, main-background-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>")Requires @use "@library/sass/modules/theme";
$form-check-input-disabled-opacity.5
$form-check-label-disabled-opacity$form-check-input-disabled-opacity
$form-check-btn-check-disabled-opacity.65
$form-switch-width2em
$form-switch-padding-start$form-switch-width + .5em
$form-switch-bg-imageurl('data:image/svg+xml,<svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(default, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-bg-image-alturl('data:image/svg+xml,<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="9" fill="#{theme.get(alt, true, main-background-color)}"/></svg>')Requires @use "@library/sass/modules/theme";
$form-switch-border-radius$form-switch-width
$form-switch-focus-bg-image$form-switch-bg-image
$form-switch-focus-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-image$form-switch-bg-image
$form-switch-checked-bg-image-alt$form-switch-bg-image-alt
$form-switch-checked-bg-positionright center
$form-check-inline-margin-end1rem
$form-select-padding-y$input-padding-y
$form-select-padding-x$input-padding-x
$form-select-font-family$input-font-family
$form-select-font-size$input-font-size
$form-select-font-weight$input-font-weight
$form-select-line-height$input-line-height
$form-select-color$input-color
$form-select-disabled-color$gray-600
$form-select-bg$input-bg
$form-select-disabled-bg$gray-200
$form-select-disabled-border-color$input-disabled-border-color
$form-select-bg-positionright $form-select-padding-x center
$form-select-indicator-colortheme.get(default, true, form-input-select-indicator-color)Requires @use "@library/sass/modules/theme";
$form-select-indicator-svgstring.replace($form-select-indicator-svg, '$opacity', 1);Requires @use "@library/sass/modules/string";
$form-select-indicatorurl("data:image/svg+xml,#{$form-select-indicator-svg}")
$form-select-feedback-icon-padding-endadd(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-positioncenter right ($form-select-padding-x + $form-select-indicator-padding)
$form-select-feedback-icon-size$input-height-inner-half $input-height-inner-half
$form-select-border-width$input-border-width
$form-select-border-color$input-border-color
$form-select-border-radius$border-radius
$form-select-box-shadow0 0 0 transparent
$form-select-focus-border-color$input-focus-border-color
$form-select-focus-width$input-focus-width
$form-select-focus-box-shadow0 0 0 $form-select-focus-width $input-btn-focus-color
$form-select-padding-y-sm$input-padding-y-sm
$form-select-padding-x-sm$input-padding-x-sm
$form-select-font-size-sm$input-font-size-sm
$form-select-padding-y-lg$input-padding-y-lg
$form-select-padding-x-lg$input-padding-x-lg
$form-select-font-size-lg$input-font-size-lg
$form-range-track-width100%
$form-range-track-height6px
$form-range-track-cursorpointer
$form-range-track-bgproperty.get(ui-base-color-5)Requires @use "@library/sass/modules/property";
$form-range-track-border-radius1rem
$form-range-track-box-shadow$box-shadow-inset
$form-range-thumb-width16px
$form-range-thumb-height$form-range-thumb-width
$form-range-thumb-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-border0
$form-range-thumb-border-radius1rem
$form-range-thumb-box-shadow0 .1rem .25rem rgba($black, .1)
$form-range-thumb-focus-box-shadow$input-focus-box-shadow
$form-range-thumb-active-bgproperty.get(form-input-focus-border)Requires @use "@library/sass/modules/property";
$form-range-thumb-disabled-bg$gray-500
$form-range-thumb-transitionbackground-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$form-file-button-color$input-color
$form-floating-heightadd(3.5rem, $input-height-border)
$form-floating-padding-x$input-padding-x
$form-floating-padding-y1rem
$form-floating-input-padding-t1.625rem
$form-floating-input-padding-b.625rem
$form-floating-label-opacity.65
$form-floating-label-transformscale(.85) translateY(-.5rem) translateX(.15rem)
$form-floating-transitionopacity .1s ease-in-out, transform .1s ease-in-out
$form-feedback-margin-top$form-text-margin-top
$form-feedback-font-size12px
$form-feedback-font-style$form-text-font-style
$form-feedback-valid-color$success
$form-feedback-invalid-color$danger
$form-feedback-icon-valid-colortheme.get(default, true, state-ok-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-validurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z" fill="#{$form-feedback-icon-valid-color}"/></svg>')
$form-feedback-icon-invalid-colortheme.get(default, true, state-error-color)Requires @use "@library/sass/modules/theme";
$form-feedback-icon-invalidurl('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5C4.8525 1.5 1.5 4.8525 1.5 9C1.5 13.1475 4.8525 16.5 9 16.5C13.1475 16.5 16.5 13.1475 16.5 9C16.5 4.8525 13.1475 1.5 9 1.5ZM12.75 11.6925L11.6925 12.75L9 10.0575L6.3075 12.75L5.25 11.6925L7.9425 9L5.25 6.3075L6.3075 5.25L9 7.9425L11.6925 5.25L12.75 6.3075L10.0575 9L12.75 11.6925Z" fill="#{$form-feedback-icon-invalid-color}"/></svg>')

Make sure to read the Customize components and Understanding and using the design system guides.

{title}