Introduction Foundations Components Patterns Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

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

Contents

Default Align Animated placeholders Button Compact date input Disabled Edit inline Edit inline title size Hint Icons Keyboard type Labels Max character Max length Min value Sizes States Types Usage Validation

States

Display each state of the input field

When a user interacts with an input field, display a focus state to allow users to concentrate on finishing the field. If the user enters the information incorrectly, show an error validation message to help the user in solving the issue.

Autofocus

The first input that is highlighted on the form. Typically seen in sign up, log in and quote form pages.

Default

If there are many fields on the form or page, a default state is shown until the user interacts with the input.

Active/Focus

Once a user interacts with an input field, an active or focus state is shown to let the user know that the field is working.

Disabled

Only show disabled inputs when it is necessary. A rule of thumb is if the field is temporarily disabled and can be active at a later stage, display a disabled state. If the input is not allowed for a user to change due to a lack of permission from the back-end, consider completely hiding it from the interface.

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>()