diff --git a/lib/components/input/TextArea/index.tsx b/lib/components/input/TextArea/index.tsx index ed3c1143..d94704b4 100644 --- a/lib/components/input/TextArea/index.tsx +++ b/lib/components/input/TextArea/index.tsx @@ -10,6 +10,8 @@ interface TextAreaProps { className?: string; disabled?: boolean; id?: string; + maxLength?: number; + minLength?: number; name?: string; placeholder?: string; ref?: any; @@ -30,6 +32,8 @@ const TextArea: FunctionComponent = ({ disabled = false, focusDelay = 0, id, + maxLength = Number.MAX_SAFE_INTEGER, + minLength = 0, name, value, placeholder, @@ -65,6 +69,8 @@ const TextArea: FunctionComponent = ({ ref={ elementRef } className={ componentClasses } disabled={ disabled } + maxLength={ maxLength } + minLength={ minLength } name={ name } value={ value } onBlur={ onBlur } diff --git a/lib/components/input/TextArea/styles.ts b/lib/components/input/TextArea/styles.ts index f59ce85b..0dbc9fe4 100644 --- a/lib/components/input/TextArea/styles.ts +++ b/lib/components/input/TextArea/styles.ts @@ -16,6 +16,10 @@ const styles = (theme: Theme): ComponentClassNames => ({ border: `1px solid`, borderColor: theme.color.content.border, + '&:invalid': { + borderColor: `${theme.color.interaction.error} !important` + }, + '&:focus': { outline: 'none', borderColor: theme.color.interaction.focus