Sass Inputs

The input styles are defined in inputs.scss. All form inputs take the default style of the Cherry design system. You can change the variants of the inputs by using class names.

<input type="text" placeholder="Placeholder" />
<input type="text" class="error" placeholder="Placeholder" />
<input type="text" class="success" placeholder="Placeholder"/>
<input type="text" class="big" placeholder="Placeholder" />
<input type="text" class="big error" placeholder="Placeholder" />
<input type="text" class="big success" placeholder="Placeholder" />
<select>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="error">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="success">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="big">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="error big">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="success big">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<textarea>Placeholder</textarea>
<textarea class="error">Placeholder</textarea>
<textarea class="success">Placeholder</textarea>
<textarea class="big">Placeholder</textarea>
<textarea class="error big">Placeholder</textarea>
<textarea class="success big">Placeholder</textarea>
<input type="checkbox" id="sample-check">
<label for="sample-check">Checkbox</label>
<input type="checkbox" id="sample-check" checked>
<label for="sample-check">Checkbox</label>
<input type="checkbox" id="sample-check" class="big">
<label for="sample-check">Checkbox</label>
<input type="checkbox" id="sample-check" class="big" checked>
<label for="sample-check">Checkbox</label>
<input type="radio" id="sample-radio">
<label for="sample-radio">Radio</label>
<input type="radio" id="sample-radio" checked>
<label for="sample-radio">Radio</label>
<input type="radio" id="sample-radio" class="big">
<label for="sample-radio">Radio</label>
<input type="radio" id="sample-radio" class="big" checked>
<label for="sample-radio">Radio</label>
<input type="text" placeholder="Placeholder" disabled />
<input type="text" class="big" placeholder="Placeholder" disabled />
<select disabled>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="big" disabled>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<textarea disabled>Placeholder</textarea>
<textarea class="big">Placeholder</textarea>
<input type="checkbox" id="sample-check" disabled>
<label for="sample-check">Checkbox</label>
<input type="checkbox" id="sample-check" class="big" disabled>
<label for="sample-check">Checkbox</label>
<input type="radio" id="sample-radio" disabled>
<label for="sample-radio">Radio</label>
<input type="radio" id="sample-radio" class="big" disabled>
<label for="sample-radio">Radio</label>
Sass ButtonsSass Spacing