import { TextArea } from '@uhg-abyss/mobile';

label

hintText

errorMessage

isRequired

isDisabled

helpContent

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
        maxLength={500}
      />
    </FormProvider>
  );
};

useForm (recommended)

Using the useForm hook with FormProvider sets state for the component.

useState

Using the useState hook gets values from the component state.

Label

Use the label prop to display a label above the text area.

Error Message (useState)

Form Compatibility

useState

useForm

Use the errorMessage prop to display a custom error message below the text area when using useState.

Success Message

Form Compatibility

useState

useForm

Use the successMessage prop to display a custom success message below the text area.

Disabled

Set the isDisabled prop to true to disable the text area so users cannot enter a value.

MaxLength

Use the maxLength prop to set the maximum length of characters accepted as input. The amount of characters remaining will appear in the bottom right. The default value of maxLength is 500. Per accessibility requirements, the hintText prop should include the maximum number of characters a user can enter.

Help Content

Use the helpContent prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

TextArea Props

Name	Type	Default	Required	Description
errorMessage	string | undefined	-	-	Error message to be displayed below input field
helpButtonAccessibilityLabel	string | undefined	-	-	Set the accessibility label for the help button
helpContent	React.ReactNode | undefined	-	-	When defined, displays a help icon that can be tapped to view the provided content in a modal screen
hintText	string | undefined	-	-	Set the text displayed below label
isDisabled	boolean | undefined	false	-	Flag to enable/disable the input. If true, the input will be disabled
isRequired	boolean | undefined	false	-	Flag to add an asterisk next to the label, indicating that the field is required. This is independent of form validation and is only for visual purposes.
label	string | undefined	-	-	Label for input field
maxLength	number | undefined	500	-	Set the maximum number of characters accepted as input
model	never | string | undefined	-	-	model is only used when the input is bound to a form via useForm. Model name used to bind the input to the form state. Only used inside a FormProvider.
onChangeText	(text: string) => void | undefined	-	-	Callback that is called when the text area text changes. Changed text is passed as a single string argument to the callback handler
showOptionalLabel	boolean | undefined	-	-	Flag to display 'optional' next to the label
successMessage	string | undefined	-	-	Success message to be displayed below input field
type	'text' | 'email' | 'password' | 'price' | 'phone' | 'number' | undefined	'text'	-	Set the type of input field
validations	Validations | undefined	-	-	Set rules for the input to be valid. Valid in both useState and useForm modes. Set rules for the input to be valid.
value	string | undefined	-	-	Value of the text area

TextArea Classes

Class Name	Description
abyss-text-area-root	Root element
abyss-text-area-header	Header element
abyss-text-area-help-button	Help button
abyss-text-area-label	Label element
abyss-text-area-hint-text	Input hint text
abyss-text-area-container	The container around the text area
abyss-text-area	Input container
abyss-text-area-clear-button	Clear button
abyss-text-area-clear-text	Clear text
abyss-text-area-remaining-count-text	Remaining count text
abyss-text-area-message	Message element
abyss-input-message-icon	Message icon
abyss-input-message-text	Message text
abyss-text-area-help-modal	Help modal
abyss-input-help-icon	Help icon element
abyss-input-help-modal-footer	Help modal footer
abyss-input-help-modal-close-button	Help modal close button

TextArea Translations

Translation Key	Value
help	Help
close	Close
error	Error
success	Success
TextArea.clear	clear
TextArea.charactersRemaining	{{count}} characters remaining

TextArea Tokens

Search tokens

Token Name	Value
input-header.color.text.label	#4B4D4F
input-header.color.text.hint	#4B4D4F
input-header.color.icon.help.rest	#196ECF
input-header.color.icon.help.active	#004BA0
input-message.color.text.error	#990000
input-message.color.text.success	#007000
input-message.color.icon.error	#990000
input-message.color.icon.success	#007000
input-field.color.surface.default	#FFFFFF
input-field.color.surface.disabled	#F3F3F3
input-field.color.text.input	#4B4D4F
input-field.color.border.rest.default	#4B4D4F
input-field.color.border.rest.error	#990000
input-field.color.border.rest.success	#007000
input-field.color.border.active.default	#196ECF
input-field.color.border.active.error	#990000
input-field.color.border.active.success	#007000
input-field.color.icon.utility.rest	#4B4D4F
input-field.color.icon.utility.disabled	#929496
input-field.color.icon.utility.active	#323334
input-character-count.color.text.label	#4B4D4F
input-character-count.color.text.link.rest	#196ECF
input-character-count.color.text.link.active	#004BA0
input-field.border-radius.all.container	4
input-field.border-width.all.container.rest	1
input-field.border-width.all.container.active	3
input-header.sizing.all.icon.help	24
input-message.sizing.all.icon.leading	20
input-field.sizing.icon.all.utility	20
input-field.sizing.icon.all.picker	20
input-container.spacing.gap.vertical.container	8
input-header.spacing.gap.horizontal.container	12
input-header.spacing.gap.horizontal.label	4
input-header.spacing.gap.vertical.content	4
input-message.spacing.gap.horizontal.container	4
input-field.spacing.padding.all.field	12
input-field.spacing.gap.horizontal.field	12
input-field.spacing.gap.horizontal.input-indicator	2
input-field.spacing.gap.horizontal.prefix-input	2
input-character-count.spacing.gap.horizontal.container	16
input-field.box-shadow.container.active	Shadow Color: $core.color.brand.60 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4
input-field.box-shadow.container.error	Shadow Color: $core.color.red.120 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4
input-field.box-shadow.container.success	Shadow Color: $core.color.green.100 Shadow Offset: Width: 0 Height: 0 Shadow Opacity: 1 Shadow Radius: 4