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.
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 | ||
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 | "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" | ||
qa | Object |
Recipes
Input with character counter
50
import { Input } from '@sproutsocial/racine'