Ai input

AI input with a single-line field, a submit button, and an optional skip text button.

Contents

Inputs
control : FormControl<string>
animateButton ?: boolean = true

Set to false for a static submit button. No expand/sweep animation or label fade-in.

autoFocus ?: AutoFocusOption = AutoFocusOption.NONE
busy ?: boolean = false

When true, replaces the submit button's content with a spinner and disables it. Skip goes with it, so neither button can advance the flow while the consumer is still processing the last one.

buttonHeight ?: number = 36

Height in px of the submit button.

buttonPaddingHorizontal ?: number = 12

Horizontal padding in px of the static (`animateButton: false`) submit button.

buttonText ?: string = ''

When set, the submit button expands into a labelled pill once `minCharacters` is reached.

fontSize ?: number = 20

Font size in px of the input text and placeholder on tablet and up.

fontSizeMobile ?: number = 16

Font size in px of the input text and placeholder on mobile.

hideOuterGlow ?: boolean = false

When true, removes the outer glow. The gradient border and inner styles are unaffected.

hint ?: string
isDisabled ?: boolean = false

When true, disables the whole field: typing, submit and skip. Takes precedence over `isSubmitDisabled` and `isSkipDisabled`. Unlike `control.disable()`, the control's value and validity are left alone.

isSkipDisabled ?: boolean = false

When true, disables only the skip button. The input stays interactive.

isSubmitDisabled ?: boolean = false

When true, disables only the submit button. The input stays interactive.

keepKeyboardOpenOnValidSubmit ?: boolean = false

Keep the virtual keyboard open after a valid submit. Invalid submits always keep it open so the user can correct the input.

label ?: string
minCharacters ?: number = 6

Character threshold at which the submit button expands (requires `buttonText`).

placeholder ?: string = ''
showButtonIcon ?: boolean = true

Set to false to show only the `buttonText` label, in every state.

showSkipBesideSubmit ?: boolean = false

Renders Skip beside the submit button instead of replacing it.

skipLabel ?: string

When set, shows a Skip text button in place of the submit button while the field is empty.

squareButton ?: boolean = false

Square off the submit button (rounded rectangle) instead of round/pill.

Outputs
onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()
onInputHandled ?: any = new EventEmitter<void>()
onSkip ?: any = new EventEmitter<void>()
onSubmit ?: any = new EventEmitter<void>()