Preview

Usage

<cs-textarea placeholder="Enter a description"></cs-textarea>
<cs-textarea rows="6" placeholder="Taller textarea"></cs-textarea>
<cs-textarea disabled placeholder="Disabled"></cs-textarea>

Properties

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 default: false

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-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.

disable-browser-spellcheckboolean

Specifies whether to disable browser spellcheck feature. If you set this to true, it disables native browser capability that checks for spelling/grammar errors. If you don't set it, the behavior follows the default behavior of the user's browser.

disabledboolean | undefined

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.

namestring | undefined

Specifies the name of the control used in HTML forms.

on-blurimport("/Users/piwit/GIT/@cumulus-ui/components/src/internal/generated/cloudscape-types").EventHandler<null> | undefined

Called when input focus is removed from the UI control.

on-changeimport("/Users/piwit/GIT/@cumulus-ui/components/src/internal/generated/cloudscape-types").EventHandler<import("/Users/piwit/GIT/@cumulus-ui/components/src/input/interfaces").BaseChangeDetail> | undefined

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

on-focusimport("/Users/piwit/GIT/@cumulus-ui/components/src/internal/generated/cloudscape-types").EventHandler<null> | undefined

Called when input focus is moved to the UI control.

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.

rowsnumber default: 3

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

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.

Events

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