Input

A component for displaying form input elements.

npm version

Source Code

npm install @vrembem/input

@use "@vrembem/input";

input

The most basic implementation of the input component consists of the input class applied to an <input> element.

<input class="input" type="text">

disabled

Adding the boolean disabled attribute to the input will provide visual indication that the input is not available for use.

<input class="input" type="text" disabled>

readonly

Adding the boolean readonly attribute to the input will provide visual indication that the user should not be able to edit the value of the input.

<input class="input" type="text" value="..." readonly>

input_auto

Sets the width of an input to auto instead of the base component width of 100%.

<input class="input input_auto" type="text">

input_size_[value]

Adjust the size of an input by increasing or decreasing its padding and font-size. By default, the input scale will provide an input height of 30px (small input_size_sm), 40px (default) and 50px (large input_size_lg).

<input class="input input_size_sm" type="text">
<input class="input input_size_lg" type="text">

Available Variations

  • button_size_sm
  • button_size_lg

input_state_[value]

Adds styles for changing the look and feel of an input to better reflect the urgency or status.

<input class="input input_state_info" type="text">
<input class="input input_state_success" type="text">
<input class="input input_state_caution" type="text">
<input class="input input_state_danger" type="text">

Available Variations

  • input_state_info
  • input_state_success
  • input_state_caution
  • input_state_danger

input_type_[value]

Adds unique styles for various form input types. These form controls share styles with the basic form input such as <select> and <textarea> HTML elements.

<select class="input input_type_select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<textarea class="input input_type_textarea" rows="3"></textarea>

Available Variations

  • input_type_select
  • input_type_textarea

Sass Variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$size core.$form-control-size Sets the height property on input and min-height property of the input_type_textarea modifier.
$padding calc(0.5em - 1px) Sets the padding property.
$transition-property box-shadow, outline, outline-offset Sets the transition-property property.
$transition-duration core.$transition-duration-short Sets the transition-duration property.
$transition-timing-function core.$transition-timing-function Sets the transition-timing-function property.
$border-radius core.$border-radius Sets the border-radius property.
$color-placeholder core.$color-subtle Sets the color property for the placeholder pseudo-element.
$font-size core.$font-size Sets the font-size property.
$line-height core.$line-height Sets the line-height property.
$border 1px solid core.$border-color-dark Sets the border property.
$border-color-hover core.$border-color-darker Sets the border-color property on :hover state.
$border-color-focus core.$primary Sets the border-color property on :focus state.
$background core.$white Sets the background property.
$background-hover null Sets the background-color property on :hover state.
$background-focus null Sets the background-color property on :focus state.
$box-shadow 0 0 0 0 rgba(core.$primary, 0), inset 0 0.1rem 0.2rem rgba(core.$black, 0.1) Sets the box-shadow property.
$box-shadow-hover null Sets the box-shadow property on :hover state.
$box-shadow-focus 0 0 0 0.2rem rgba(core.$primary, 0.5), inset 0 0 0 rgba(core.$black, 0) Sets the box-shadow property on :focus state.
$color core.$color Sets the color property.
$color-hover null Sets the color property on :hover state.
$color-focus null Sets the color property on :focus state.
$outline none Sets the outline property.
$outline-hover null Sets the outline property on :hover state.
$outline-focus null Sets the outline property on :focus state.
$outline-offset null Sets the outline-offset property.
$outline-offset-hover null Sets the outline-offset property on :hover state.
$outline-offset-focus null Sets the outline-offset property on :focus state.
$disabled-background core.$shade Sets the background-color property of the disabled state.
$readonly-background core.$shade Sets the background-color property of the readonly state.
$size-sm core.$form-control-size-sm Sets the height property on input and min-height property of the input_type_textarea and input_size_sm modifier combination.
$size-sm-padding calc(0.25rem - 1px) 0.5rem Sets the padding property of the input_size_sm modifier.
$size-sm-font-size core.$font-size-sm Sets the font-size property of the input_size_sm modifier.
$size-sm-line-height core.$line-height-sm Sets the line-height property of the input_size_sm modifier.
$size-lg core.$form-control-size-lg Sets the height property on input and min-height property of the input_type_textarea and input_size_lg modifier combination.
$size-lg-padding calc(0.648rem - 1px) Sets the padding property of the input_size_lg modifier.
$size-lg-font-size core.$font-size-lg Sets the font-size property of the input_size_lg modifier.
$size-lg-line-height core.$line-height-lg Sets the line-height property of the input_size_lg modifier.
$type-select-icon-color core.$color Sets the fill property for the svg data:image of the input_type_select modifier.
$type-select-icon 'data:image/svg...' Ref ↓ The data:image/svg string used as the background-image property of the input_type_select modifier.
$type-textarea-min-width 100% Sets the min-width property of the input_type_textarea modifier.

$type-select-icon

$type-select-icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="#{core.encodecolor($type-select-icon-color)}"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>' !default;