Bits | Freelancer Bits

AI textarea with a toolbar that includes a send button and optional attachments and voice input buttons.

Contents

Default

Button text

Hint

Keep keyboard open on submit

Max lines

Toolbar variants

Validation

When buttonText is set, the submit button expands into a pill once the text reaches minCharacters (default: 6). Type at least 6 characters to see it expand.

Use minCharacters to customize the expansion threshold. Here it is set to 10.

Without buttonText the submit button stays a circle regardless of how much text is entered.

Inputs

control : FormControl<string>

autoFocus ?: any = AutoFocusOption.NONE

buttonText ?: string = ''

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

hint ?: string

keepKeyboardOpenOnSubmit ?: boolean = false

Keep the virtual keyboard open when the submit button is tapped to prevent the button from stealing focus from the textarea. This lets validation errors/shake show in place instead of after the keyboard closes.

label ?: string

maxLines ?: number = 12

Line count at which the textarea becomes scrollable on desktop/tablet.

maxLinesMobile ?: number = 10

Line count at which the textarea becomes scrollable on mobile (>= 400px).

maxLinesMobileSmall ?: number = 7

Line count at which the textarea becomes scrollable on small mobile (<400px).

minCharacters ?: number = 6

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

placeholder ?: string = ''

showAttachmentsButton ?: boolean = false

showVoiceInputButton ?: boolean = false

Outputs

onAttachmentsClick ?: any = new EventEmitter<void>()

onBlur ?: any = new EventEmitter<void>()

onFocus ?: any = new EventEmitter<void>()

onInputHandled ?: any = new EventEmitter<void>()

onSubmit ?: any = new EventEmitter<void>()

onVoiceInputClick ?: any = new EventEmitter<void>()

Ai

Cards

Controls

Freelancer domain

Loading

Modals

Structure

Text & links

Ai textarea