Components

Input

Input is a themed version of the native form field that enables a user to interact and input data.

Always use a Label component to identify and describe the purpose of an input element.

import { Input } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
namestring
ariaLabelstring
Label used to describe the input if not used with an accompanying visual label
placeholderstring
Placeholder text for when value is undefined or empty
valuestring
Current value of the input
type"date""email""number""password""text""url""search""text"
HTML type attribute
autoCompleteboolean
Set option to display earlier typed values
autoFocusbooleanfalse
Will autofocus the element when mounted to the DOM
disabledbooleanfalse
HTML disabled attribute
isInvalidboolean
Whether or not the current contents of the input are invalid
hasWarningboolean
Whether or not the current contents of the input has any warnings
requiredboolean
HTML required attribute
elemBeforeReact.Node
16x16 element, such as an icon
elemAfterReact.Node
16x16 element, such as an icon
maxLengthnumber
Max length of the input
inputPropsany
Props to spread onto the underlying input element
innerRef"input"
Used to get a reference to the underlying element
onBlur(e: SyntheticFocusEvent<HTMLInputElement>) => void
onChange(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void
onFocus(e: SyntheticFocusEvent<HTMLInputElement>) => void
onKeyDown( e: SyntheticKeyboardEvent<HTMLInputElement>, value: string ) => void
onKeyUp( e: SyntheticKeyboardEvent<HTMLInputElement>, value: string ) => void
onPaste(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void
size"large""small""default""default"
qaObject

Recipes

Input with character counter
50
import { Input } from '@sproutsocial/racine'