Form Elements

Forms are used to allow the user different kinds of input possibilities. Chayns provides different kinds of inputs. You can choose between the following types.

Input

The input field is used to get free input from the user (e.g. name). The placeholder should describe the kind of input that is expected.

Check out this samples.

<input class="input" type="text" placeholder="sample" required>

Textarea

The textarea is used if the input field is too small for the expected text (e.g. description texts). The placeholder should describe the kind of input that is expected.

Check out this samples.

<textarea class="input"  placeholder="Long Sample"  type="text"></textarea>

Checkbox

The checkbox is used when the user is meant to choose between a set number of options.

Check out this samples.

<input type="checkbox"  class="checkbox"  name="check"  id="check">
<label for="check">Sample</label>

Radio-Button

The radio button is used to allow the user to select between different items. Only one item can be selected at a time.

Check out this samples.

<input name="sampleRadio" type="radio" class="radio" id="radio">
<label for="radio">Sample 1</label>
<input name="sampleRadio" type="radio" class="radio" id="radio2">
<label for="radio2">Sample 2</label>

Button

The basic button is used to execute a specific function. It must be centered below or above the text. To disable the button add the class "button--disabled" to it.

Check out this samples.

<div style="text-align: center">
  <button class="button">Sample</button>
</div>

Choose-Button

The choosebutton is used to allow the user to select an option. It must be aligned to the right. To disable the button add the class "button--disabled" to it.

Check out this samples.

<div style="text-align: right">
  <button class="choosebutton">Sample</button>
</div>

Toggle-Button

The toggle button is used to allow the user to change the state of a value. It can be activated or deactivated and is aligned to the right of the text that discribes it's functionallity.

Check out this samples.

<input type="checkbox" class="switch" id="switch">
<label for="switch" data-on="On" data-off="Off"></label>