Area where user can enter larger amounts of text. Commonly used in forms.
import React from 'react' import { Textarea } from '../../' const TextareaDefault = (props) => { return ( <div> <Textarea label="Label" rows={4} {...props} /> <br /> <Textarea label="Label" placeholder="Placeholder text" {...props} /> <br /> <Textarea label="Label" name="comment" placeholder="Placeholder text" value="Default value text" {...props} /> </div> ) } export default TextareaDefault
import React from 'react' import { Textarea } from '../../' const TextareaCustom = (props) => { return ( <div> <Textarea label="Label"> <textarea className="my_custom_class" name="custom_textarea" rows={4} {...props} > {'Content goes here.'} </textarea> </Textarea> </div> ) } export default TextareaCustom
import React from 'react' import { Textarea } from '../../' const TextareaResize = (props) => { return ( <div> <Textarea label="auto" placeholder="Resize Auto" resize="auto" {...props} /> <br /> <Textarea label="vertical" placeholder="Resize Vertical" resize="vertical" {...props} /> <br /> <Textarea label="both" placeholder="Resize Both" resize="both" {...props} /> <br /> <Textarea label="horizontal" placeholder="Resize Horizontal" resize="horizontal" {...props} /> </div> ) } export default TextareaResize
Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
import React from 'react' import { Textarea } from '../..' const TextareaError = (props) => { return ( <div> <Textarea error="This field has an error!" label="Label" name="comment" placeholder="Placeholder text" value="Default value text" {...props} /> </div> ) } export default TextareaError
import React, { useState } from 'react' import { Textarea } from '../../' const TextareaCharacterCounter = () => { const [value1, setValue1] = useState('Counting characters!') const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!') const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.') const [error, setError] = useState('Too many characters!') const [count1, setCount1] = useState(0) const [count2, setCount2] = useState(value1.length) const [count3, setCount3] = useState(value2.length) const [count4, setCount4] = useState(value3.length) const handleMaxCount = (event) => { setCount2(event.target.value.length) setValue1(event.target.value) } const handleMaxCountWithBlocker = (event, maxCharacters) => { if (event.target.value.length <= maxCharacters) { setCount3(event.target.value.length) setValue2(event.target.value) } } const handleMaxCountWithError = (event, maxCharacters) => { if (event.target.value.length > maxCharacters) { setError('Too many characters!') } else { setError('') } setCount4(event.target.value.length) setValue3(event.target.value) } return ( <> <Textarea characterCount={count1} label="Count Only" onChange={(event) => setCount1(event.target.value.length)} rows={4} /> <br /> <Textarea characterCount={count2} label="Max Characters" maxCharacters="100" onChange={() => handleMaxCount(event)} rows={4} value={value1} /> <br /> <Textarea characterCount={count3} label="Max Characters w/ Blocker" maxCharacters="100" onChange={() => handleMaxCountWithBlocker(event, 100)} rows={4} value={value2} /> <br /> <Textarea characterCount={count4} error={error} label="Max Characters w/ Error" maxCharacters="75" onChange={() => handleMaxCountWithError(event, 75)} rows={4} value={value3} /> </> ) } export default TextareaCharacterCounter
Do not use for small text amounts (use Text Input instead). Avoid using textarea without validation if it is required and using with validation if not required.