Textfield

Textfields allow users to enter and select text within a field.

    Simple Usage

    <label className="c-textfield w-96">
  <input type="text" className="c-textfield__input" placeholder="Placeholder" />
</label>

    XS version

    <label className="c-textfield w-96">
  <input type="text" className="c-textfield__input c-textfield__input--xs" placeholder="Placeholder" />
</label>

    With variations

    <label className="c-textfield c-textfield--error w-96">
  <FontAwesomeIcon className="c-textfield__icon-left fa-fw" icon={faStroopwafel}/>
  <input type="text" className="c-textfield__input" placeholder="Placeholder" />
  <span className="c-textfield__suffix">Unit</span>
</label>

    Implementation

    TypeName
    Elements
    Wrapper.c-textfield
    Input.c-textfield__input
    Icon.c-textfield__icon-left
    .c-textfield__icon-right    		Optional
    Suffix.c-textfield__suffixOptional
    Modifiers
    Connector.c-textfield--connector-l-down
    .c-textfield--connector-l-up
    Connector.c-textfield--input--xs
    States
    Success.c-textfield--success
    Warning.c-textfield--warning
    Error.c-textfield--error
    Inlien.c-textfield--inline

    Modifiers

    Connector

    <label class="c-textfield c-textfield--connector-l-down mb-2 w-96">
  <input type="text" class="c-textfield__input" placeholder="Placeholder"/>
</label>
<label class="c-textfield c-textfield--connector-l-up w-96">
  <input type="text" class="c-textfield__input" placeholder="Placeholder"/>
</label>

    States

    Success

    <label className="c-textfield c-textfield--success w-96">
  <input type="text" className="c-textfield__input" placeholder="Placeholder" />
  <FontAwesomeIcon className="c-textfield__icon-right text-green fa-fw" icon={faCheckCircle}/>
</label>

    Warning

    <label className="c-textfield c-textfield--warning w-96">
  <input type="text" className="c-textfield__input" placeholder="Placeholder" />
  <FontAwesomeIcon className="c-textfield__icon-right text-orange fa-fw" icon={faExclamationTriangle}/>
</label>

    Error

    <label className="c-textfield c-textfield--error w-96">
  <input type="text" className="c-textfield__input" placeholder="Placeholder" />
  <FontAwesomeIcon className="c-textfield__icon-right text-red fa-fw" icon={faExclamationCircle}/>
</label>