</> cf-forms docs

view the repository

Theme variables

  • The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Colors

  • @input-error
@input-warning
@input-success
@input-disabled

Sizing

  • @input__super-font-size

Form labels

Label header

<label class="form-label-header">
    Form label header
</label>

Super input

.input__super

<input class="input__super" type="text" value="Super input" title="Test input"></input>
<button class="btn btn__super">Super</button>
  • An input that matches the height of a super button.

Input states

Error state

<input class="error" type="text" value="Invalid input" title="Test input">
  • .error
  • See the 'Form icons' section below for guidance on adding icons to states.

Warning state

<input class="warning" type="text" value="Invalid input" title="Test input">
  • .warning
  • See the 'Form icons' section below for guidance on adding icons to states.

Success state

<input class="success" type="text" value="Validated input" title="Test input">
  • .success
  • See the 'Form icons' section below for guidance on adding icons to states.

Disabled state

<input class="disabled" disabled="true" autocomplete="off" type="text" value="Validated input" title="Test input">
  • .disabled

Form icons

Form input icons

<input type="text" value="" title="Test input">
<span class="cf-form_input-icon cf-icon cf-icon-email"></span>
  • Form input icons add small positioning tweaks to Capital Framework icons.

Form input error icon

<input class="error" type="text" value="Invalid input" title="Test input">
<span class="cf-form_input-icon cf-icon cf-icon-delete-round" role="alert"></span>
  • The icon must be placed directly after the form input in the markup and the input must use the 'error' class.
  • For invalid fields only use the alert role to call attention to fields that need immediate attention: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

Form input warning icon

<input class="warning" type="text" value="Invalid input" title="Test input">
<span class="cf-form_input-icon cf-icon cf-icon-error-round" role="alert"></span>
  • The icon must be placed directly after the form input in the markup and the input must use the 'warning' class.
  • For invalid fields only use the alert role to call attention to fields that need immediate attention: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

Form input success icon

<input class="success" type="text" value="Validated input" title="Test input">
<span class="cf-form_input-icon cf-icon cf-icon-approved-round"></span>
  • The icon must be placed directly after the form input in the markup and the input must use the 'error' class.
  • For valid inputs only use the alert role to indicate that a previously invalid input is now valid: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

Form group

  • Pattern structure
-----------------
.form-group
  .form-group_item
  • A form group is recommended when you need to provide spacing between form elements and between groups of form elements.

.form-group (block)

<div class="form-group">
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
</div>
<div class="form-group">
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
</div>
<div class="form-group">
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
    <div class="form-group_item">
        <input type="text" title="Test input">
    </div>
</div>
  • .form-group
  • Provides sizeable margins between groups of form elements.

.form-group_item (element)

<div class="form-group_item">
    <input type="text" title="Test input">
</div>
<div class="form-group_item">
    <input type="text" title="Test input">
</div>
<div class="form-group_item">
    <input type="text" title="Test input">
</div>
  • Provides subtle margins between form elements within the same group.

Real world example

<div class="form-group">
    <label class="form-label-header">Form group</label>
    <div class="form-group_item">
        <input type="text" value="Form group item" title="Test input">
    </div>
    <div class="form-group_item">
        <input type="text" value="Form group item" title="Test input">
    </div>
</div>
<div class="form-group">
    <label class="form-label-header">Form group</label>
    <div class="form-group_item">
        <input type="text" value="Form group item" title="Test input">
    </div>
    <div class="form-group_item">
        <input type="text" value="Form group item" title="Test input">
    </div>
</div>

Input with button

Default input and button

<div class="input-with-btn">
    <div class="input-with-btn_input">
        <input type="text" title="Test input">
    </div>
    <div class="input-with-btn_btn">
        <button class="btn">Search</button>
    </div>
</div>

Super input and button

<div class="input-with-btn">
    <div class="input-with-btn_input">
        <input class="input__super" type="text" title="Test input">
    </div>
    <div class="input-with-btn_btn">
        <button class="btn btn__super">Search</button>
    </div>
</div>

Button inside input

Default button inside of an default input

<div class="btn-inside-input">
    <input type="text"
           value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable." title="Test input">
    <button class="btn btn__link btn__secondary">
        Clear
        <span class="cf-icon cf-icon-delete"></span>
    </button>
</div>

Super button inside of a super input

<div class="btn-inside-input">
    <input class="input__super"
           type="text"
           value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable." title="Test input">
    <button class="btn btn__super btn__link btn__secondary">
        Clear
        <span class="cf-icon cf-icon-delete"></span>
    </button>
</div>