Input
Inputs that accept typed input from users
For the correct usage of the input field check all the available stories and the Forms page under General Info
Max length
Input fields can have a maximum character length. It is typically used for number inputs like phone numbers and verification codes, as well as limiting the length of long descriptions.
Inputs
control : FormControl<T>
disabled : boolean
editInline : InputEditInlineType
sizeDesktop : InputSize
sizeTablet : InputSize
type : any
afterLabel ?: string = ''
align ?: InputAlign = InputAlign.LEFT
Set how to horizontally align the number increment input
attrReadonly ?: true
autoComplete ?: AutoCompleteHint = 'on'
Improves UX for form fields like Usernames, Emails, Company Names, etc. Autocomplete defaults to 'on' but you can disable
it with 'off'. If you wish to use more specific tokens like 'given-name' and 'family-name', see the link below.
autofocus ?: AutoFocusOption = AutoFocusOption.NONE
beforeLabel ?: string = ''
borderless ?: boolean = false
Not for general use. This is only for Messaging search.
If you'd like to use this input, make sure you discuss with UI Eng
borderlessMobile ?: boolean = false
Not for general use. This is only for browse mobile page.
If you'd like to use this input, make sure you discuss with UI Eng
clearDateRange ?: boolean = false
Clears the inline date range picker's value. Only used for InputType.DATERANGE_INLINE.
Since inline usage of sat-calendar component doesn't have a binding input element,
we need to reset the date range picker's value manually when the form control's value gets reseted.
color ?: InputTextColor = InputTextColor.DEFAULT
Force color white for transparent cases in light mode.
compactDateInput ?: boolean = false
This input only works on mobile when the type is `InputType.DATE`.
If true, the date icon will be hidden on mobile.
dynamicValidation ?: boolean = false
First validation happens only on blur, and validates on keyup once an error exists
editInlineTitleSize ?: InputEditInlineTitleSize
Not for general use. This is only for larger title inputs of type TEXT.
If you'd like to use this input, make sure you discuss with UI Eng
expanded ?: boolean = false
fontWeight ?: FontWeight = FontWeight.NORMAL
hideLabelTag ?: boolean = false
hint ?: string
Displays hint under input field upon focus
iconEnd ?: string
iconEndLabel ?: string
iconMarginMobile ?: boolean = true
Not for general use. This is only for browse mobile page.
If you'd like to use this input, make sure you discuss with UI Eng.
iconStart ?: string
iconStartLabel ?: string
id ?: string
isExpandable ?: boolean = false
isShadowed ?: boolean = false
keyboardType ?: KeyboardType
Hints the browser what kind of virtual keyboard to display when the input is focused.
label ?: string
Sets aria label for accessibility when there is no associated visible text
labelTag ?: string
leftIconColor ?: any = IconColor.INHERIT
leftIconSize ?: any = IconSize.MID
maxCharacter ?: number
maxLength ?: number
minValue ?: number
Set a minimum value for number inputs
placeholder ?: string
placeholders ?: readonly string[] = []
rightIconColor ?: any = IconColor.INHERIT
rightIconSize ?: any = IconSize.MID
searchRoundCorners ?: boolean = true
shakeOnBlur ?: boolean = true
Shake input on blur event
showDateSelectedState ?: boolean = false
Highlight input field when date value is set
size ?: InputSize = InputSize.MID
textAlign ?: InputTextAlign = InputTextAlign.LEFT
transparentBackground ?: boolean = false
validationStateCheck ?: boolean = false
Immediately check state of input with validation
Outputs
iconEndClick ?: any = new EventEmitter<MouseEvent>()
iconStartClick ?: any = new EventEmitter<MouseEvent>()
onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.