Textarea#
Import#
import { Textarea, TextareaField } from 'bumbag'
Usage#
Label#
If you want to have the label contained within the bounds of the textarea field, supply the containLabel
prop:
Fields#
You can also use the <TextareaField>
component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.
It accepts a combination of Textarea props and FieldWrapper props.
Default values#
For uncontrolled inputs, set a default value using the defaultValue
prop.
Disabled#
Make the input disabled with the disabled
prop.
Sizes#
An input can come in different sizes - small
, medium
, large
, or the default.
States#
An input can use different states (as per palette) such as danger
, success
and warning
.
Controlled Usage#
The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of onChange
and value
.
Note: Do not use defaultValue
with controlled inputs!
Accessibility#
Patterns#
- If an input is required, then
aria-required
is set totrue
for the input. - If an input is invalid, then
aria-invalid
is set totrue
for the input.
Props#
Textarea Props#
autoComplete
string
autoFocus
boolean
Automatically focus on the textarea
containLabel
boolean
defaultValue
string | string[]
Default value of the textarea
disabled
boolean
Disables the textarea
label
string
isRequired
boolean
Makes the textarea required and sets aria-invalid to true
name
string
Name of the textarea field
size
"default" | (string & {}) | "small" | "medium" | "large"
Alters the size of the textarea. Can be "small", "medium" or "large"
maxLength
number
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.
minLength
number
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.
multiple
boolean
This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.
pattern
string
Regex pattern to apply to the textarea
placeholder
string
Hint text to display
readOnly
boolean
This prop prevents the user from modifying the value of the textarea. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
spellCheck
boolean
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
step
string | number
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.
state
string
State of the textarea. Can be any color in the palette.
textareaRef
((instance: any) => void) | RefObject<any>
textareaProps
{ unstable_system?: any; top?: string | number | { [key: string]: string }; right?: string | number | { [key: string]: string }; bottom?: string | number | { [key: string]: string }; left?: string | number | { [key: string]: string }; ... 803 more ...; onFocus?: (event: FocusEvent<...>) => void; }
type
string
Specify the type of textarea.
value
string | number | string[]
Value of the textarea
onBlur
(event: FocusEvent<HTMLTextAreaElement>) => void
Function to invoke when focus is lost
onChange
(event: FormEvent<HTMLTextAreaElement>) => void
Function to invoke when textarea has changed
onFocus
(event: FocusEvent<HTMLTextAreaElement>) => void
Function to invoke when textarea is focused
TextareaField Props#
textareaProps
Pick<BoxProps, "unstable_system" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 777 more ... | "themeKey"> & LocalTextareaProps
Additional props for the Textarea component
Inherits Textarea
props
autoComplete
string
autoFocus
boolean
Automatically focus on the textarea
containLabel
boolean
defaultValue
string | string[]
Default value of the textarea
disabled
boolean
Disables the textarea
label
string
isRequired
boolean
Makes the textarea required and sets aria-invalid to true
name
string
Name of the textarea field
size
"default" | (string & {}) | "small" | "medium" | "large"
Alters the size of the textarea. Can be "small", "medium" or "large"
maxLength
number
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.
minLength
number
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.
multiple
boolean
This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.
pattern
string
Regex pattern to apply to the textarea
placeholder
string
Hint text to display
readOnly
boolean
This prop prevents the user from modifying the value of the textarea. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
spellCheck
boolean
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
step
string | number
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.
state
string
State of the textarea. Can be any color in the palette.
textareaRef
((instance: any) => void) | RefObject<any>
type
string
Specify the type of textarea.
value
string | number | string[]
Value of the textarea
onBlur
(event: FocusEvent<HTMLTextAreaElement>) => void
Function to invoke when focus is lost
onChange
(event: FormEvent<HTMLTextAreaElement>) => void
Function to invoke when textarea has changed
onFocus
(event: FocusEvent<HTMLTextAreaElement>) => void
Function to invoke when textarea is focused
Inherits FieldWrapper
props
children
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | (({ elementProps }: { ...; }) => ReactNode)
description
string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the description text of the field wrapper.
hint
string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the bottom hint text of the field wrapper.
isOptional
boolean
Sets the optional flag (and displays optional text) on the field wrapper.
labelType
"label" | "legend"
Sets the label type on the field wrapper.
tooltip
string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the tooltip of the field wrapper. Can be either a string, or a React component.
tooltipTriggerComponent
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the tooltip trigger component.
validationText
string
Sets the bottom validation text of the field wrapper.
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
Theming#
Textarea#
Textarea.styles.base
Textarea.styles.placeholder
Textarea.Wrapper.styles.base
TextareaField#
TextareaField.styles.base