Input

Best practices

  • Use placeholder copy to display the expected shape of data. For example, for a field that asks for a twitter handle, a placeholder of '@kalohq' rather than 'your twitter handle' is better.

Props

NameTypeDescription
theme
enumThe visual theme of the input ('default' | 'transparent' | 'well')
margin
enumAdds a bottom margin ('none' | 'small' | 'medium' | 'large')
size
enumThe overall size of the input ('small' | 'medium' | 'large' | 'extra-large')
defaultValue
stringSets the initial value for the input outside of the React lifecycle
value
stringThe value of the input
onFocus
funcA function to call when a user focuses on the input
onBlur
funcA function to call when a user focuses away from the input
onChange
funcA function to call when the input value changes
onEdited
func
style
objectA style object to pass to the underlying element
className
stringA class to pass down
expands
bool
focusOnMount
boolWill focus the input automatically on render
placeholder
stringSets the input placeholder copy
valid
boolDisplays the input with a valid status if true, and an invalid status if false
readonly
boolRemoves user interaction, but can still display a value
name
stringA name to pass down to the DOM
inputRef
funcA React 'ref'
addonPrefix
unionA value to display before (to the left) of the input
addonSuffix
unionA value to display after (to the right) the input
fullWidth
bool
icon
stringAn icon to displau to the left of the input
properties
objectNative DOM properties to pass to the input element

Input

A basic input
<Input placeholder="Your first name" />

Well input

A highlighted input that turns into a normal input on focus
<Input icon="search" placeholder="Location" theme="well" />

Disabled Input

An input that is disabled and doesn't allow user manipulation
<Input disabled={true} placeholder="Your twitter handle" />

Readonly Input

An input that is readonly
<Input readonly={true} value="Project 101" />

Sizing

Inputs can be one of three sizes


<span> <Input placeholder="Small input" size="small" /> <br /> <Input placeholder="Medium input" size="medium" /> <br /> <Input placeholder="Large input" size="large" /> </span>

With addon before

Inputs can have addons to display contextual hints to the user
$
<Input addonPrefix="$" placeholder="0.00" size="medium" />

With addon after

Likewise, inputs can have addons after the main input
kalohq.com
<Input addonSuffix="kalohq.com" placeholder="0.00" size="medium" />

With valid status

Displays an input with a valid status
<Input placeholder="hello@kalohq.com" valid={true} />

With invalid status

Displays an input with an invalid status
<Input placeholder="hello@kalohq.com" valid={false} />