Examples
Default styling
Message
hover
Hover state
Message
focus
Focus state
Message
disabled
Disabled state
Message
error
Error state
Message
Markup
<div class="input input--[modifier class]">
<label for="input-[modifier class]" class="input__label">Text Input</label>
<input type="text" id="input-[modifier class]" class="input__widget" [modifier class]>
<p class="input__message">Message</p>
</div>
Source:
assets/styles/02-atoms/06-form-inputs/_input.scss, line 1