Skip to main content
Logo USWDS + Tailwind

Text input

A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
An input description
Twig 
<div class="space-y-12">


	<div class="max-w-xs">
		<label for="default" class="block">Default input</label>
		<div class="mt-2 relative">
			<input id="default" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
		</div>
	</div>


	<div class="max-w-xs">
		<label for="description" class="block">Description input</label>
		<div id="input-hint" class="text-gray-50">An input description</div>
		<div class="mt-2 relative">
			<input id="description" aria-describedby="input-hint" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
		</div>
	</div>


	<div class="max-w-xs">
		<label for="success" class="block">Success input</label>
		<div class="mt-2 relative">
			<input id="success" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-valid="true"/>
		</div>
	</div>


	<div class="max-w-xs">
		<label for="error" class="block">Error input</label>
		<div class="mt-2 relative">
			<input id="error" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-invalid="true"/>
		</div>
	</div>


</div>