Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

TextArea

A text area for entering multiple lines of text

How to use this component

This element should be used when the user needs to enter a larger amount of text.  For example, an explanation of a problem.  This can limited to a character limit


Code Resource

<label for="textArea" class="form_formLabelTitle">Message</label>
<textarea name="textArea" rows="3" cols="20" id="textArea" title="Message" class="form_formTextbox2"></textarea>
/* TextArea */

.form_formLabelTitle {
    width: 100%;
    font-size: 1em;
    color: black;
    float: left;
    text-align: left;
    padding: 7px;
    padding-left: 0px;
}

.form_formTextbox2 {
    width: 100%;
    font-size: medium;
    margin-bottom: 15px;
    float: left;
    display: block;
    border: 1px solid silver;
    padding: 20px;
    min-height: 150px;
    background: white!important;
    color: black!important;
    border-radius: 6px;
}

.form_formTextbox2:hover, .form_formTextbox2:focus {
	border: 1px solid #015b66;
	background: #f9f9f9;	
outline: none;
}
/* END */

Working Example