# Input

This page contains all possible variations of the REACT input component.

Used to render an input field.

# Default

<GocoInput id="input-id" onChange={onChangeFunction} />

# Label

<GocoInput id="input-id" onChange={onChangeFunction} label="Enter text" />

# Value

<GocoInput id="input-id" onChange={onChangeFunction} value="example string" />

# onFocus

<GocoInput id="input-id" onChange={onChangeFunction} onFocus="{onFocusFunction}" />

# onBlur

<GocoInput id="input-id" onChange={onChangeFunction} onBlur="{onBlurFunction}" />

# Dark

<GocoInput id="input-id" onChange={onChangeFunction} dark />

# Sizes

# Small

<GocoInput id="input-id" onChange={onChangeFunction} size="small" />

# Medium

<GocoInput id="input-id" onChange={onChangeFunction} size="medium" />

# Large

<GocoInput id="input-id" onChange={onChangeFunction} size="large" />

# X-Large

<GocoInput id="input-id" onChange={onChangeFunction} size="xlarge" />

# Prefix

<GocoInput id="input-id" onChange={onChangeFunction} prefix="£" />

# Suffix

<GocoInput id="input-id" onChange={onChangeFunction} suffix="pounds" />

# Icon and position

<GocoInput id="input-id" onChange={onChangeFunction} icon="help" iconPosition="right" />

# Placeholder

<GocoInput id="input-id" onChange={onChangeFunction} placeholder="Enter some text" />

# Type

<GocoInput id="input-id" onChange={onChangeFunction} type="password" />

# Additional classes

<GocoInput id="input-id" onChange={onChangeFunction} className="class1 class2" />

# Mask

<GocoInput id="input-id" onChange={onChangeFunction} masked />

# Max Length

<GocoInput id="input-id" onChange={onChangeFunction} maxLength={10} />

# Pattern

<GocoInput id="input-id" onChange={onChangeFunction} pattern="([0-9]){3}" />

# Required

<GocoInput id="input-id" onChange={onChangeFunction} required />

# Disabled

<GocoInput id="input-id" onChange={onChangeFunction} disabled />

# Faux disabled

<GocoInput id="input-id" onChange={onChangeFunction} fauxDisabled />

# Component props

Prop	Type	Default	Required	Description
id	String		true	Adds an id attribute to the input. It must be unique.
value	String		false	Sets the value attribute of the input.
onChange	(newValue: string) => void		true	Function to be called when change event is triggered, must be given a string.
onFocus	() => void		false	Function to be called when focus event is triggered.
onBlur	() => void		false	Function to be called when blur event is triggered.
label	String		false	Adds a label to the input.
dark	Boolean		false	Sets the display of the input to dark mode.
size	InputSize		false	Adjusts the height of the input.
prefix	String		false	Adds given text at the start of the input.
suffix	String		false	Adds given text to the end of the input.
icon	IconName		false	Adds the icon to display inside the input. It will only show if both icon and iconPosition props are populated.
iconPosition	InputIconPosition		false	Selects where to dispaly the icon inside the input. It will only show if both icon and iconPosition props are populated.
placeholder	String		false	Sets the placeholder text for the input.
type	InputType	'text'	false	Sets the input type ('text', 'password', 'email').
className	String		false	Adds the prop values to the input classList.
masked	Boolean		false	Adds the data-mask attribute and sets it to true.
maxLength	Number		false	Sets the maxLength attribute to the given value.
pattern	String		false	Adds the given regex to the input pattern attribute.
required	Boolean		false	When true, adds the required attribute to the input.
disabled	Boolean		false	When true, adds the disabled attribute to the input.
fauxDisabled	Boolean		false	When true, adds the faux disabled state to the input.
success	Boolean		false	When true, adds the success state to the input.
error	Boolean		false	When true, adds the error state to the input.
loading	Boolean		false	When true, adds the loading state to the input.

← Button Select →