Input Components

The input styles are defined in Input.styles.js. You can change the variants of the inputs by using different props.

<Input type="text" placeholder="Placeholder" />
<Input type="text" placeholder="Placeholder" error />
<Input type="text" placeholder="Placeholder" success />
<Input type="text" placeholder="Placeholder" size="big" />
<Input type="text" placeholder="Placeholder" size="big" error />
<Input type="text" placeholder="Placeholder" size="big" success />
<Select>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select error>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select success>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select size="big">
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select size="big" error>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select size="big" success>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Textarea>Placeholder</Textarea>
<Textarea error>Placeholder</Textarea>
<Textarea success>Placeholder</Textarea>
<Textarea size="big">Placeholder</Textarea>
<Textarea size="big" error>Placeholder</Textarea>
<Textarea size="big" success>Placeholder</Textarea>
<Input type="checkbox" id="sample-check" label="Checkbox" />
<Input type="checkbox" id="sample-check" label="Checkbox" checked />
<Input type="checkbox" id="sample-check" label="Checkbox" size="big">
<Input type="checkbox" id="sample-check" label="Checkbox" size="big" checked>
<Input type="radio" id="sample-radio" label="Radio" />;
<Input type="radio" id="sample-radio" label="Radio" checked />;
<Input type="radio" id="sample-radio" label="Radio" size="big" />
<Input type="radio" id="sample-radio" label="Radio" size="big" checked />
<Input type="text" placeholder="Placeholder" disabled />
<Input type="text" placeholder="Placeholder" size="big" disabled />
<Select disabled>
	<option value="1">Sample 1</option>
	<option value="2">Sample 2</option>
	<option value="3">Sample 3</option>
</Select>
<Select size="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 size="big">Placeholder</Textarea>
<Input type="checkbox" id="sample-check" label="Checkbox" disabled />
<Input type="checkbox" id="sample-check" label="Checkbox" size="big" disabled>
<Input type="radio" id="sample-radio" label="Radio" disabled />
<Input type="radio" id="sample-radio" label="Radio" size="big" disabled />
Button ComponentsSpacing Component