• DocumentationDocs

PostCSS Inputs

The input styles are defined in inputs.css. 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"/>
<label for="sample">Label</label>
<input type="text" placeholder="Placeholder" id="sample" />
<input type="text" class="big" placeholder="Placeholder" />
<input type="text" class="big error" placeholder="Placeholder" />
<input type="text" class="big success" placeholder="Placeholder" />
<label for="sample">Label</label>
<input type="text" class="big" placeholder="Placeholder" id="sample" />
<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>
<div class="radio-check-wrapper">
	<input type="checkbox" id="sample-check">
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper">
	<input type="checkbox" id="sample-check" checked>
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper big">
	<input type="checkbox" id="sample-check" class="big">
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper big">
	<input type="checkbox" id="sample-check" class="big" checked>
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper">
	<input type="radio" id="sample-radio">
	<label for="sample-radio">Radio</label>
</div>
<div class="radio-check-wrapper">
	<input type="radio" id="sample-radio" checked>
	<label for="sample-radio">Radio</label>
</div>
<div class="radio-check-wrapper big">
	<input type="radio" id="sample-radio" class="big">
	<label for="sample-radio">Radio</label>
</div>
<div class="radio-check-wrapper big">
	<input type="radio" id="sample-radio" class="big" checked>
	<label for="sample-radio">Radio</label>
</div>
<div class="toggle-input-wrapper">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>
<div class="toggle-input-wrapper">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" checked />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>
<div class="toggle-input-wrapper big">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" class="big" />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>
<div class="toggle-input-wrapper big">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" class="big" checked />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>
<input type="range" />
<input type="range" class="big" />
<input type="range" class="big" disabled />
<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>
<div class="radio-check-wrapper">
	<input type="checkbox" id="sample-check" disabled>
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper big">
	<input type="checkbox" id="sample-check" class="big" disabled>
	<label for="sample-check">Checkbox</label>
</div>
<div class="radio-check-wrapper">
	<input type="radio" id="sample-radio" disabled>
	<label for="sample-radio">Radio</label>
</div>
<div class="radio-check-wrapper big">
	<input type="radio" id="sample-radio" class="big" disabled>
	<label for="sample-radio">Radio</label>
</div>
<div class="toggle-input-wrapper">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" disabled />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>
<div class="toggle-input-wrapper big">
	<div class="toggle-input-inner">
		<input type="checkbox" id="sample-toggle" class="big" disabled />
		<div class="toggle-input-slider"></div>
	</div>
	<label for="sample-toggle">Toggle</label>
</div>

Full Width

<label for="sample">Label</label>
<input type="text" placeholder="Placeholder" id="sample" class="full-width" />
<label for="sample">Label</label>
<input type="text" class="big full-width" placeholder="Placeholder" id="sample" />
<select class="full-width">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<select class="big full-width">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</select>
<textarea class="full-width">Placeholder</textarea>
<textarea class="big full-width">Placeholder</textarea>
PostCSS ButtonsPostCSS Spacing

Follow the creator

Join the community