Components

Input

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

Always use a to identify and describe the purpose of an input element. If there is not enough space for a text label you can use an aria-label instead.

If you are using an input for a form, check out the component. It handles errors, labels, and formatting for you.

Also, you can refer to our form patterns for tips on how to build accessible forms.

import { Input } from '@sproutsocial/racine'

If your implementation requres more granular control over the component and styles you can use a and

import { Input } from '@sproutsocial/racine'

Properties

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
ariaDescribedbystring
Attribute used to associate other elements that describe the Input, like an error
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
readOnlyboolean
HTML readonly 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'