<Togglerinitial={true}>
{({ on, toggle }) => (
<>
<TextAreaname="error-text-area"error={on?"Therewasanerror":null}defaultValue="This is some text"onChange={console.log}/><Spacermb={2}/><Flex><Checkboxselected={on}onSelect={toggle}>
Show Error
</Checkbox></Flex>
</>
)}
</Toggler>
With title
Note
There was an error
<TextAreaname="title-text-area"title="Note"error="There was an error"defaultValue="This is some text"onChange={console.log}/>
With title and description
Note
For your security do not share personal information.
<TextAreaname="description-text-area"title="Note"description="For your security do not share personal information."defaultValue="This is some text"onChange={console.log}/>
With character limit
Note
For your security do not share personal information.
17 / 200 max
<TextAreaname="limited-text-area"title="Note"description="For your security do not share personal information."defaultValue="This is some text"characterLimit={200}onChange={console.log}/>
With character limit and error
Further details
Please provide any further pertinent details to help us assess your case.
There was an error
17 / 322 max
Show Error
<Togglerinitial={true}>
{({ on, toggle }) => (
<>
<TextAreaname="limiting-with-error-text-area"error={on?"Therewasanerror":null}defaultValue="This is some text"characterLimit="322"title="Further details"description="Please provide any further pertinent details to help us assess your case."onChange={console.log}/><Spacermb={2}/><Flex><Checkboxselected={on}onSelect={toggle}>
Show Error
</Checkbox></Flex>
</>
)}
</Toggler>