Sircus

Form

<input type="text" class="Input" value="Default">
<input type="text" class="Input is-focus" value="Focus">
<input type="text" class="Input is-disabled" value="Disabled">

Select

<select class="Select">
  <option>Default</option>
  <option>...</option>
</select>

<select class="Select is-focus">
  <option>Active</option>
  <option>...</option>
</select>

<select class="Select is-disabled">
  <option>Disabled</option>
  <option>...</option>
</select>

Textarea

<textarea class="Textarea"></textarea>
<textarea class="Textarea is-focus"></textarea>
<textarea class="Textarea is-disabled"></textarea>

Form

<input type="text" class="Input Input--sm" value="Small">
<input type="text" class="Input" value="Default">
<input type="text" class="Input Input--lg" value="Large">

Select

<select class="Select Select--sm">
  <option>Active</option>
  <option>...</option>
</select>

<select class="Select">
  <option>Default</option>
  <option>Option 02</option>
</select>

<select class="Select Select--lg">
  <option>Disabled</option>
  <option>Option 02</option>
</select>

Full width

<input type="text" class="Input Input--sm" value="Small full">
<input type="text" class="Input" value="Full">
<input type="text" class="Input Input--lg" value="Large full">

<select class="Select Select--sm">...</select>
<select class="Select">...</select>
<select class="Select Select--lg">...</select>

Install

npm install sircus-components-form sircus-variables

CSS import

@import "sircus-components-form";
@import "sircus-components-form/size";
@import "sircus-variables";

CSS

@import "./lib/form";