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
name of the form element and used for data-qa-input
ariaLabelstring
Label used to describe the input if not used with an accompanying 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"
Sets the HTML type attribute
autoCompleteboolean
Set option to display earlier typed values
autoFocusbooleanfalse
Will autofocus the element when mounted to the DOM
disabledbooleanfalse
Sets the HTML disabled attribute
isInvalidboolean
Renders an error state when true
hasWarningboolean
Renders an warning state when true
requiredboolean
Sets the HTML required attribute
elemBeforeReactNode
16x16 element, such as an icon
elemAfterReactNode
16x16 element, such as an icon
maxLengthnumber
Max length of the input
qaany
legacy for qa props until we cut everyone over
innerRef"input"
Pass React.createRef() to get a reference to the underlying input element
onBlursignature
Event Handlers
onChangesignature
onFocussignature
onKeyDownsignature
onKeyUpsignature
onPastesignature
size"large""small""default""default"

Recipes

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