Preview

Usage

<cs-prompt-input placeholder="Ask a question..."></cs-prompt-input>

Properties

action-button-aria-labelstring default: 'Submit'

Adds an aria-label to the action button.

action-button-icon-altstring

Specifies alternate text for a custom icon. We recommend that you provide this for accessibility. This property is ignored if you use a predefined icon or if you set your custom icon using the iconSvg slot.

action-button-icon-nameIconProps.Name default: 'send'

Determines what icon to display in the action button.

action-button-icon-urlstring

Specifies the URL of a custom icon. Use this property if the icon you want isn't available.

If you set both actionButtonIconUrl and actionButtonIconSvg, actionButtonIconSvg will take precedence.

aria-labelstring | undefined default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

aria-requiredboolean | undefined

Specifies whether to add aria-required to the native control.

auto-completeboolean | string

Specifies whether to enable a browser's autocomplete functionality for this input. In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields). To use it correctly, set the name property.

You can either provide a boolean value to set the property to "on" or "off", or specify a string value for the autocomplete attribute.

auto-focusboolean | undefined

Indicates whether the control should be focused as soon as the page loads, which enables the user to start typing without having to manually focus the control. Don't use this option on pages where the control may be scrolled out of the viewport.

disable-action-buttonboolean default: false

Specifies whether to disable the action button.

disable-browser-autocorrectboolean

Specifies whether to disable browser autocorrect and related features. If you set this to true, it disables any native browser capabilities that automatically correct user input, such as autocorrect and autocapitalize. If you don't set it, the behavior follows the default behavior of the user's browser.

disabledboolean | undefined default: false

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

disable-secondary-actions-paddingsboolean

Determines whether the secondary actions area of the input has padding. If true, removes the default padding from the secondary actions area.

disable-secondary-content-paddingsboolean

Determines whether the secondary content area of the input has padding. If true, removes the default padding from the secondary content area.

max-rowsnumber

Specifies the maximum number of lines of text the textarea will expand to. Defaults to 3. Use -1 for infinite rows.

min-rowsnumber

Specifies the minimum number of lines of text to set the height to.

namestring | undefined

Specifies the name of the control used in HTML forms.

placeholderstring | undefined default: ''

Specifies the placeholder text rendered when the value is an empty string.

read-onlyboolean | undefined default: false

Specifies if the control is read-only, which prevents the user from modifying the value but includes it in a form submission. A read-only control can receive focus.

Don't use read-only inputs outside a form.

spellcheckboolean

Specifies the value of the spellcheck attribute on the native control. This value controls the native browser capability to check for spelling/grammar errors. If not set, the browser default behavior is to perform spellchecking. For more details, check the spellcheck MDN article.

Enhanced spellchecking features of your browser and/or operating system may send input values to external parties. Make sure it’s deactivated for fields with sensitive information to prevent inadvertently sending data (such as user passwords) to third parties.

valuestringrequired

Specifies the text entered into the form element.

Slots

actionButtonIconSvg

Specifies the SVG of a custom icon.

Use this property if you want your custom icon to inherit colors dictated by variant or hover states. When this property is set, the component will be decorated with aria-hidden="true". Ensure that the svg element:

• has attribute focusable="false".
• has viewBox="0 0 16 16".

If you set the svg element as the root node of the slot, the component will automatically

• set stroke="currentColor", fill="none", and vertical-align="top".
• set the stroke width based on the size of the icon.
• set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the svg element into a span. You can still set the stroke to currentColor to inherit the color of the surrounding elements.

If you set both actionButtonIconUrl and actionButtonIconSvg, iconSvg will take precedence.

Note: Remember to remove any additional elements (for example: defs) and related CSS classes from SVG files exported from design software. In most cases, they aren't needed, as the svg element inherits styles from the icon component.

customPrimaryAction

Use this to replace the primary action. If this is provided then any other actionButton* properties will be ignored. Note that you should still provide an onAction function in order to handle keyboard submission.

secondaryActions

Use this slot to add secondary actions to the prompt input.

secondaryContent

Use this slot to add secondary content, such as file attachments, to the prompt input.

Events

actionCustomEvent<PromptInputProps.ActionDetail>

Called whenever a user clicks the action button or presses the "Enter" key. The event detail contains the current value of the field.

blurCustomEvent<null> | undefined

Called when input focus is removed from the UI control.

changeCustomEvent<BaseChangeDetail> | undefined

Called whenever a user changes the input value (by typing or pasting). The event detail contains the current value of the field.

focusCustomEvent<null> | undefined

Called when input focus is moved to the UI control.

keyDownCustomEvent<InputProps.KeyDetail>

Called when the underlying native textarea emits a keydown event. The event detail contains the keyCode and information about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).

keyUpCustomEvent<InputProps.KeyDetail>

Called when the underlying native textarea emits a keyup event. The event detail contains the keyCode and information about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).