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

label

hintText

maxLength

errorMessage

isRequired

isDisabled

helpContent

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

  return (
    <FormProvider state={form}>
      <TextArea
        model="text-area-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
        maxLength={1500}
      />
    </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, formatted with a comma thousands separator for counts of 1,000 or more (for example, 5,000 characters remaining). 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	A11y	Description
errorMessage	string | undefined			Error message to be displayed below input field
helpButtonAccessibilityLabel	string | undefined			Set the accessibility label for the help button
helpContent	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | 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	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	InputType | undefined	'text'		Set the type of input field
validations	RegisterOptions | 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			The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker. Value of the text area

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

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