Skip to content

Latest commit

 

History

History

forms

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 

README.md

@zendeskgarden/css-forms npm version

This package contains basic .c-field component styling.

Installation

npm install @zendeskgarden/css-forms

Usage

Once installed, form CSS can be accessed via postcss-import.

@import '@zendeskgarden/css-forms';

Input

Input CSS is intended to enhance the following HTML.

<div class="c-field">
  <label class="c-field__label" for="input-id">Label</label>
  <div class="c-field__hint">Optional hint</div>
  <input class="c-field__input" id="input-id" placeholder="[placeholder]" />
  <div class="c-field__message" role="alert">Optional validation message</div>
</div>

Area

Use the following --area modifier class to support textarea fields.

<div class="c-field">
  <label class="c-field__label" for="textarea-id">Label</label>
  <textarea id="textarea-id" class="c-field__input c-field__input--area"></textarea>
</div>

Select

Use the following --select modifier to support select fields.

<div class="c-field">
  <label class="c-field__label" for="select-id">Label</label>
  <select class="c-field__input c-field__input--select" id="select-id">
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
  </select>
</div>

Input modifications

See http://zendeskgarden.github.io/css-components/?path=/story/components-forms-input--default for various input field modification classes.

Toggle

Checkbox CSS is intended to enhance the following HTML. Element order is important.

<div class="c-field">
  <input class="c-field__checkbox" id="checkbox-id" type="checkbox" />
  <label class="c-field__label" for="checkbox-id">Label</label>
  <div class="c-field__hint">Optional hint</div>
  <div class="c-field__message" role="alert">Optional validation message</div>
</div>

Radio CSS is intended to enhance the following HTML. Element order is important.

<div class="c-field">
  <input class="c-field__radio" id="radio-id" type="radio" />
  <label class="c-field__label" for="radio-id">Label</label>
  <div class="c-field__hint">Optional hint</div>
  <div class="c-field__message" role="alert">Optional validation message</div>
</div>

Toggle modifications

See http://zendeskgarden.github.io/css-components/?path=/story/components-forms-toggle--default for toggle component usage and modification classes.