Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input Date input Date range calendar File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Date input

Date input

A text input that picks a date or a date range from a calendar

Split out of the input component so the Material datepicker is only downloaded by the routes that actually need it. Everything else about the field — sizes, labels, icons, validation — behaves exactly as it does on an input.

Contents

Default Compact date input Date range Disabled

Date range

Used to select two dates while staying in the same context.

–

Min and max dates

You can set min/max dates to restrict the date range that can be selected.

–
Inputs
control : FormControl<T>
disabled : boolean
editInline : InputEditInlineType
sizeDesktop : InputSize
sizeTablet : InputSize
type : any

Whether the field picks a single date or a date range. A `FormControl<Date>` accepts `DATE`; a `FormControl<DateRange>` accepts `DATERANGE`, which renders separate start and end fields.

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
backgroundColor ?: InputBackgroundColor = 'default'

Set the background color of the input component

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

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 `DateInputType.DATE`. If true, the date icon will be hidden on mobile.

customValidationError ?: TemplateRef<HTMLElement>
displayValidation ?: boolean = true
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

expandFromDirection ?: SearchExpandFromDirection = SearchExpandFromDirection.RIGHT

Not for general use. This is only for search. 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 ?: InputIconEnd
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 ?: InputIconStart
iconStartLabel ?: string
id ?: string
isExpandable ?: boolean = false

Not for general use. This is only for search. If you'd like to use this input, make sure you discuss with UI Eng

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
maxDate ?: Date

Maximum selectable date for the datepicker.

maxLength ?: number
minDate ?: Date

Minimum selectable date for the datepicker.

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

showIncrement ?: boolean = true

If false, the increment buttons will be hidden. Applies to InputType of NUMBER_TEXT and NUMBER.

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