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" label="Label" id="sample" disabled />
<Input type="text" placeholder="Placeholder" size="big" />
<Input type="text" placeholder="Placeholder" size="big" error />
<Input type="text" placeholder="Placeholder" size="big" success />
<Input type="text" placeholder="Placeholder" label="Label" size="big" id="sample" disabled />
<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 />
<ToggleInput id="sample-toggle" label="Toggle" />
<ToggleInput id="sample-toggle" label="Toggle" checked />
<ToggleInput id="sample-toggle" label="Toggle" size="big" />
<ToggleInput id="sample-toggle" label="Toggle" size="big" checked />
<RangeSlider />
<RangeSlider size="big" />
<RangeSlider size="big" disabled />
<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 />
<ToggleInput id="sample-toggle" label="Toggle" disabled />
<ToggleInput id="sample-toggle" label="Toggle" size="big" disabled />
<Input type="text"
placeholder="Placeholder"
label="Label"
id="sample"
fullWidth
/>
<Input type="text"
placeholder="Placeholder"
label="Label"
id="sample"
size="big"
fullWidth
/>
<Select fullWidth>
<option value="1">Sample 1</option>
<option value="2">Sample 2</option>
<option value="3">Sample 3</option>
</Select>
<Select size="big" fullWidth>
<option value="1">Sample 1</option>
<option value="2">Sample 2</option>
<option value="3">Sample 3</option>
</Select>
<Textarea fullWidth>Placeholder</Textarea>
<Textarea size="big" fullWidth>Placeholder</Textarea>