@zendeskgarden/css-forms
This package is intended to provide consistent styling for form fields used throughout Zendesk products.
Installation
npm install @zendeskgarden/css-forms
Usage
Once installed, form CSS can be accessed via postcss-import
.
@import '@zendeskgarden/css-forms';
Checkbox
Checkbox input CSS is intended to support component structure similar to the following.
<div class="c-chk">
<input class="c-chk__input" id="box-id" type="checkbox" />
<label class="c-chk__label" for="box-id">Label</label>
</div>
Modifications
See http://zendeskgarden.github.io/css-components/?path=/story/components-forms-toggle for checkbox component usage and modification classes.
Toggle
Use the .c-chk--toggle
modifier to style the checkbox as a toggle.
<div class="c-chk c-chk--toggle">...</div>
Radio
Use the .c-chk--radio
modifier to style for radio button form fields.
<div class="c-chk c-chk--radio">
<input class="c-chk__input" id="rdo-1" name="level" type="radio" />
<label class="c-chk__label" for="rdo-1">Beginner</label>
</div>
<div class="c-chk c-chk--radio">
<input class="c-chk__input" id="rdo-2" name="level" type="radio" />
<label class="c-chk__label" for="rdo-2">Intermediate</label>
</div>
<div class="c-chk c-chk--radio">
<input class="c-chk__input" id="rdo-3" name="level" type="radio" />
<label class="c-chk__label" for="rdo-3">Advanced</label>
</div>
RTL
Use the following state class to support RTL text direction:
<div class="c-chk is-rtl">...</div>
Range
Range input CSS is intended to support a component structure similar to the following.
<div class="c-range">
<label class="c-range__label" for="range-id">Label</label>
<small class="c-range__hint">Optional hint.</small>
<input class="c-range__input" id="range-id" type="range" />
</div>
Modifications
See http://zendeskgarden.github.io/css-components/?path=/story/components-forms-range for range component usage and modification classes.
Inline
Use the following modifier class to support inline range fields:
<div class="c-range c-range--inline">...</div>
RTL
Use the following state class to support RTL layout. Consider the guidelines under Material Design Bidirectionality when using a range slider to model directional elements (i.e. playback).
<div class="c-range is-rtl">...</div>
Text
Text input CSS is intended to support a component structure similar to the following.
<div class="c-txt">
<label class="c-txt__label" for="text-id">Label</label>
<small class="c-txt__hint">Optional hint.</small>
<input class="c-txt__input" id="text-id" placeholder="[placeholder]" type="text" />
</div>
Modifications
See http://zendeskgarden.github.io/css-components/?path=/story/components-forms-text for text component usage and modification classes.
Inline
Use the following modifier class to support inline text fields:
<div class="c-txt c-txt--inline">...</div>
Area
Use the following modifier class to support textarea
fields:
<div class="c-txt">
<textarea class="c-txt__input c-txt__input--area"></textarea>
</div>
Select
Use the following select
modifier to support dropdown fields:
<div class="c-txt">
<select class="c-txt__input c-txt__input--select" id="select">
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
</div>
RTL
Use the following state class to support RTL text direction:
<div class="c-txt is-rtl">...</div>