Area where user can enter larger amounts of text. Commonly used in forms.
import React, {useState} from 'react' import Textarea from 'playbook-ui' const TextareaDefault = (props) => { const [value, setValue] = useState('Default value text') const handleChange = (event) => { setValue(event.target.value) } return ( <div> <Textarea label="Label" rows={4} /> <br /> <Textarea label="Label" placeholder="Placeholder text" /> <br /> <Textarea label="Label" name="comment" onChange={(e) => handleChange(e)} placeholder="Placeholder text" value={value} /> </div> ) } export default TextareaDefault
import React from 'react' import Textarea from 'playbook-ui' const TextareaCustom = (props) => { return ( <div> <Textarea label="Label" > <textarea className="my_custom_class" name="custom_textarea" rows={4} > {'Content goes here.'} </textarea> </Textarea> </div> ) } export default TextareaCustom
import React from 'react' import Textarea from 'playbook-ui' const TextareaResize = (props) => { return ( <div> <Textarea label="auto" placeholder="Resize Auto" resize="auto" /> <br /> <Textarea label="vertical" placeholder="Resize Vertical" resize="vertical" /> <br /> <Textarea label="both" placeholder="Resize Both" resize="both" /> <br /> <Textarea label="horizontal" placeholder="Resize Horizontal" resize="horizontal" /> </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, {useState} from 'react' import { Textarea } from 'playbook-ui' const TextareaError = (props) => { const [value, setValue] = useState('default value text') const handleChange = (event) => { setValue(event.target.value) } return ( <div> <Textarea error="This field has an error!" label="Label" name="comment" onChange={(e)=> handleChange(e)} placeholder="Placeholder text" value={value} /> </div> ) } export default TextareaError
import React, { useState } from 'react' import Textarea from 'playbook-ui' const TextareaCharacterCounter = (props) => { 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
import React, { useState } from 'react' import Textarea from 'playbook-ui' const TextareaInline = (props) => { const [value, setValue] = useState('Try clicking into this text.') const handleChange = (event) => { setValue(event.target.value) } return ( <div> <Textarea inline onChange={(e) => handleChange(e)} resize="auto" rows={1} value={value} /> </div> ) } export default TextareaInline
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.