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 requires more granular control over the component and styles you can use a and
import { Input } from '@sproutsocial/racine'
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
id | string | ID of the form element, should match the "for" value of the associated label | ||
name | string | |||
ariaLabel | string | Label used to describe the input if not used with an accompanying visual label | ||
ariaDescribedby | string | Attribute used to associate other elements that describe the Input, like an error | ||
clearButtonLabel | string | Label for Input.ClearButton. Required when using Input.ClearButton. | ||
placeholder | string | Placeholder text for when value is undefined or empty | ||
value | string | Current value of the input | ||
type | "date" "email" "number" "password" "text" "url" "search" | "text" | HTML type attribute | |
autoComplete | boolean | Set option to display earlier typed values | ||
autoFocus | boolean | false | Will autofocus the element when mounted to the DOM | |
disabled | boolean | false | HTML disabled attribute | |
readOnly | boolean | HTML readonly attribute | ||
isInvalid | boolean | Whether or not the current contents of the input are invalid | ||
hasWarning | boolean | Whether or not the current contents of the input has any warnings | ||
required | boolean | HTML required attribute | ||
elemBefore | React.Node | 16x16 element, such as an icon | ||
elemAfter | React.Node | 16x16 element, such as an icon | ||
maxLength | number | Max length of the input | ||
inputProps | any | 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" | ||
qa | Object | |||
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'
Recipes
import { Input } from '@sproutsocial/racine'
import { Input } from '@sproutsocial/racine'