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

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

Success Message

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

Prop Name	Type	Default	Description
errorMessage	string	-	Error message to be displayed below input field
helpButtonAccessibilityLabel	string	-	Set the accessibility label for the help button
helpContent	string | ReactNode	-	When defined, displays a help icon that can be tapped to view the provided content in a modal screen
hintText	string	-	Set the text displayed below label
isDisabled	boolean	false	Flag to enable/disable the input. If true, the input will be disabled
isRequired	boolean	false	Flag to require text
label	string	-	Label for input field
maxLength	string	500	Set the maximum number of characters accepted as input
onBlur	function	-	Callback fired every time the component is unfocused
onChangeText	function	-	Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler
onFocus	function	-	Callback fired every time the component is focused
successMessage	string	-	Success message to be displayed below input field
value	string		Value of the text input

TextArea Classes

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

TextArea Translations

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

Search tokens

TextArea 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