Input

View in Lexicon

This section demonstrates the different text input types.

install	yarn add @clayui/form
version
use	import {ClayCheckbox} from '@clayui/form';

Example

<div className="form-group">
	<label for="basicInputTypeText">Name</label>
	<input
		className="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.

<div className="form-group">
	<label className="disabled" for="basicInputTypeTextDisabled">Name</label>
	<input
		disabled
		className="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.

<div className="form-group">
	<label for="basicInputTypeTextReadOnly">User ID</label>
	<input
		readonly
		className="form-control"
		id="basicInputTypeTextReadOnly"
		type="text"
		value="59432"
	/>
</div>

Sizes

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

<div className="form-group">
	<label for="smallTextInput">.form-control-sm</label>
	<input
		className="form-control form-control-sm"
		id="smallTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div className="form-group">
	<label for="normalTextInput">Default</label>
	<input
		className="form-control"
		id="normalTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>
<div className="form-group">
	<label for="largeTextInput">.form-control-lg</label>
	<input
		className="form-control form-control-lg"
		id="largeTextInput"
		placeholder="Placeholder"
		type="text"
	/>
</div>

Textarea

<div className="form-group">
	<label for="basicInputTypeTextarea">Textarea</label>
	<textarea
		className="form-control"
		id="basicInputTypeTextarea"
		placeholder="Placeholder"
	></textarea>
</div>

Validations

Success

<div className="form-group has-success">
	<label for="inputSuccess1">
		has-success
		<svg
			className="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input className="form-control" id="inputSuccess1" type="text" />
	<div className="form-feedback-group">
		<div className="form-feedback-item">This is a form-feedback-item.</div>
		<div className="form-feedback-item">
			<span className="form-feedback-indicator">
				<svg
					className="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 className="form-text">This is form-text.</div>
	</div>
</div>

Warning

<div className="form-group has-warning">
	<label for="inputWarning1">
		has-warning
		<svg
			className="lexicon-icon lexicon-icon-asterisk reference-mark"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" />
		</svg>
	</label>
	<input className="form-control" id="inputWarning1" type="text" />
	<div className="form-feedback-group">
		<div className="form-feedback-item">This is a form-feedback-item.</div>
		<div className="form-feedback-item">
			<span className="form-feedback-indicator">
				<svg
					className="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 className="form-text">This is form-text.</div>
	</div>
</div>

Error

<div className="form-group has-error">
	<label for="inputError1">
		has-error
		<svg
			className="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"
		className="form-control"
		id="inputError1"
		type="text"
	/>
	<div className="form-feedback-group">
		<div className="form-feedback-item" id="input-error-1-error-message">
			This is a form-feedback-item.
		</div>
		<div className="form-feedback-item">
			<span className="form-feedback-indicator">
				<svg
					className="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 className="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.

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.

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.

<form
	action="/docs/components/input/markup?#css-html-5-validations-novalidate-attribute"
	novalidate
	method="get"
>
	<div className="form-group-autofit">
		<div className="form-group-item">
			<label for="formValidationLettersOnly1">
				Letters Only
				<svg
					className="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				className="form-control"
				id="formValidationLettersOnly1"
				placeholder="Letters Only"
				required
				pattern="^[A-Za-z]+$"
				type="text"
			/>
			<div className="invalid-feedback">
				<span className="form-feedback-indicator">
					<svg
						className="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 className="form-group-item">
			<label for="formValidationNumbersOnly1">
				Numbers Only
				<svg
					className="lexicon-icon lexicon-icon-asterisk reference-mark"
					focusable="false"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#asterisk" />
				</svg>
			</label>
			<input
				className="form-control"
				id="formValidationNumbersOnly1"
				pattern="^[0-9]*$"
				placeholder="Numbers Only"
				required
				type="text"
			/>
			<div className="invalid-feedback">
				<span className="form-feedback-indicator">
					<svg
						className="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 className="btn-group">
		<div className="btn-group-item">
			<button className="btn btn-primary submit-html5-form" type="submit">
				Submit
			</button>
		</div>
	</div>
</form>