MultiLine Text Box
UIMultiLineTextBox
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/605e40fe7e6c9fe4d7a1fc8f_Screen%20Shot%202021-03-26%20at%201.15.25%20PM.png)
Styles
<UIMultiLineTextBox className="multi-line-form"
label="Embed Code"
value="Sample\nUIMultiLineInput"
placeholder="Multiline placeholder"
onChange={(evt) => {this.setState({embedCodeValue: evt.target.value})}
value={embedCodeValue}
footerMessage={"validation error"}
validationState={"error"}
rows={10}
/>
Using this Component
You should use this component when you need to input a textarea element but need a label and validation styles attached to it. Essentially when ever you need a textarea in an input form.
Structure
Behavior
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/60620bf01f8103e4b1918056_Screen%20Shot%202021-03-29%20at%2010.18.22%20AM.png)
<UIMultiLineTextBox className="multi-line-form"
label="Embed Code"
footerMessage={"This field is required"}
validationState={"error"}
rows={10}
/>
Playground Coming Soon!
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/605e40fe7e6c9fe4d7a1fc8f_Screen%20Shot%202021-03-26%20at%201.15.25%20PM.png)
Styles
<UIMultiLineTextBox className="multi-line-form"
label="Embed Code"
value="Sample\nUIMultiLineInput"
placeholder="Multiline placeholder"
onChange={(evt) => {this.setState({embedCodeValue: evt.target.value})}
value={embedCodeValue}
footerMessage={"validation error"}
validationState={"error"}
rows={10}
/>
Using this Component
You should use this component when you need to input a textarea element but need a label and validation styles attached to it. Essentially when ever you need a textarea in an input form.
Structure
Behavior
![](https://assets-global.website-files.com/5cf94933bf4ff12103d58c2a/60620bf01f8103e4b1918056_Screen%20Shot%202021-03-29%20at%2010.18.22%20AM.png)
<UIMultiLineTextBox className="multi-line-form"
label="Embed Code"
footerMessage={"This field is required"}
validationState={"error"}
rows={10}
/>