Skip to main contentSkip to search

Input

This section demonstrates the different text input types.

installyarn add @clayui/form
version3.122.0

Stable3.122.0View in LexiconCHANGELOGstorybook demos

Example

Code Sample (expand to see it) 
<div class="form-group">
	<label for="basicInputTypeText">Name</label>
	<input
		class="form-control"
		id="basicInputTypeText"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Disabled

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Code Sample (expand to see it) 
<div class="form-group">
	<label class="disabled" for="basicInputTypeTextDisabled">Name</label>
	<input
		disabled
		class="form-control"
		id="basicInputTypeTextDisabled"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Code Sample (expand to see it) 
<div class="form-group">
	<label for="basicInputTypeTextReadOnly">User ID</label>
	<input
		readonly
		class="form-control"
		id="basicInputTypeTextReadOnly"
		type="text"
		value="59432"
	/>
</div>

Sizes

Set heights using classes like .form-control-lg and .form-control-sm.

Code Sample (expand to see it) 
<div class="form-group">
	<label for="smallTextInput">.form-control-sm</label>
	<input
		class="form-control form-control-sm"
		id="smallTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div class="form-group">
	<label for="normalTextInput">Default</label>
	<input
		class="form-control"
		id="normalTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div class="form-group">
	<label for="largeTextInput">.form-control-lg</label>
	<input
		class="form-control form-control-lg"
		id="largeTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Textarea

Code Sample (expand to see it) 
<div class="form-group">
	<label for="basicInputTypeTextarea">Textarea</label>
	<textarea
		class="form-control"
		id="basicInputTypeTextarea"
		placeholder="Placeholder"
	></textarea>
</div>

Validations

Success

Code Sample (expand to see it) 
<div class="form-group has-success">
	<label for="inputSuccess1">
		has-success
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input class="form-control" id="inputSuccess1" type="text" />
	<div class="form-feedback-group">
		<div class="form-feedback-item">This is a form-feedback-item.</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-check-circle-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#check-circle-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

Warning

Code Sample (expand to see it) 
<div class="form-group has-warning">
	<label for="inputWarning1">
		has-warning
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input class="form-control" id="inputWarning1" type="text" />
	<div class="form-feedback-group">
		<div class="form-feedback-item">This is a form-feedback-item.</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-warning-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#warning-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

Error

Code Sample (expand to see it) 
<div class="form-group has-error">
	<label for="inputError1">
		has-error
		<svg
			class="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input
		aria-describedby="input-error-1-error-message"
		aria-invalid="true"
		class="form-control"
		id="inputError1"
		type="text"
	/>
	<div class="form-feedback-group">
		<div class="form-feedback-item" id="input-error-1-error-message">
			This is a form-feedback-item.
		</div>
		<div class="form-feedback-item">
			<span class="form-feedback-indicator">
				<svg
					class="lexicon-icon lexicon-icon-exclamation-full"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#exclamation-full" />
				</svg>
			</span>
			This is a form-feedback-indicator.
		</div>
		<div class="form-text">This is form-text.</div>
	</div>
</div>

HTML 5 Validations

The browser default form validation. Submit the form to see it in action.

Please enter letters only.
Please enter numbers only.

Novalidate Attribute

The novalidate attribute on the form element will disable the browser's default validation tooltip. This allows us to display custom validation text while taking advantage of the browser's built in form validation API.

You will need to prevent form submission if there are invalid fields by using the HTMLInputElement.checkValidity() method.

Code Sample (expand to see it) 
document.addEventListener('submit', function(event) {
	var t = event.target;

	if (t.getAttribute('novalidate') === '') {
		if (t.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
		}

		t.classList.add('was-validated');
	}
});

The was-validated class on the form element displays the success or error messages for :valid and :invalid fields. It should be added when the form is submitted. Documentation on HTML5 form validation attributes can be found on MDN.

This is correct!
Please enter letters only.
Please enter numbers only.
Please enter a valid city.
Please select a state.
Please enter a valid zip code.
Code Sample (expand to see it) 
<form
	action="/docs/components/input/markup.html?#css-html-5-validations-novalidate-attribute"
	novalidate
	method="get"
>
	<div class="form-group-autofit">
		<div class="form-group-item">
			<label for="formValidationLettersOnly1">
				Letters Only
				<svg
					class="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				class="form-control"
				id="formValidationLettersOnly1"
				placeholder="Letters Only"
				required
				pattern="^[A-Za-z]+$"
				type="text"
			/>
			<div class="invalid-feedback">
				<span class="form-feedback-indicator">
					<svg
						class="lexicon-icon lexicon-icon-exclamation-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#exclamation-full"
						/>
					</svg>
				</span>
				Please enter letters only.
			</div>
		</div>
		<div class="form-group-item">
			<label for="formValidationNumbersOnly1">
				Numbers Only
				<svg
					class="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				class="form-control"
				id="formValidationNumbersOnly1"
				pattern="^[0-9]*$"
				placeholder="Numbers Only"
				required
				type="text"
			/>
			<div class="invalid-feedback">
				<span class="form-feedback-indicator">
					<svg
						class="lexicon-icon lexicon-icon-exclamation-full"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#exclamation-full"
						/>
					</svg>
				</span>
				Please enter numbers only.
			</div>
		</div>
	</div>
	<div class="btn-group">
		<div class="btn-group-item">
			<button class="btn btn-primary submit-html5-form" type="submit">
				Submit
			</button>
		</div>
	</div>
</form>

How can this be improved? Create an issue!