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.

You can also refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

import { Input } from '@sproutsocial/racine'
() => {
return (
<FormField
label='First Name'
>
{props => <Input {...props} />}
</FormField>
)
}

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

import { Input } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor='name' mb={300}>
First name
</Label>
<Input
value={value}
onChange={e => setValue(e.target.value)}
id='name'
name='name'
/>
</Box>
)
}

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
clearButtonLabelstring
Label for Input.ClearButton. Required when using Input.ClearButton.
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
{| current: null | HTMLInputElement |}
(React.ElementRef<any> | HTMLElement) => void
Used to get a reference to the underlying element
onBlur(e: SyntheticFocusEvent<HTMLInputElement>) => void
onChange(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void
onClear(e: SyntheticEvent<HTMLButtonElement>) => 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
appearance
'primary'
'secondary'
'primary'
Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input. Note that this prop should only be used to alter styles and not functionality.

Subcomponents

Clear Button

Input.ClearButton is an optional subcomponent that renders a button that clears the Input. A Clear Button is included automatically for any with "search" and can be added to an input of another type by passing <Input.ClearButton/> as the prop. In either case, a localized prop must be passed to .

import { Input } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor="name" mb={300}>
First name
</Label>
<Input
value={value}
onChange={e => setValue(e.target.value)}
id="name"
name="name"
elemAfter={<Input.ClearButton />}
clearButtonLabel="Clear"
/>
</Box>
)
}

Recipes

Input with character counter

Note the usage of component nested inside , this is done to convey to screen-reader users there is a character limit associated with the input.

import { Input } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("")
return (
<Box>
<Label htmlFor='name' mb={300}>
First name <VisuallyHidden>(50 characters)</VisuallyHidden>
</Label>
<Input
value={value}
onChange={e => setValue(e.target.value)}
id='name'
name='name'
elemAfter={
<CharacterCounter currentValue={value.length} maxValue={50} />
}
/>
</Box>
)
}
Secondary Input Style

For better accessibility, placeholder text is required when using the secondary input style.

import { Input } from '@sproutsocial/racine'
() => {
const [value, setValue] = useState("")
return (
<Box>
<Input
ariaLabel="Enter your name"
value={value}
onChange={e => setValue(e.target.value)}
id='name'
name='name'
appearance='secondary'
placeholder='Enter your name'
/>
</Box>
)
}