Forms

Ripple UI comes with a forms classes that can be used to create different types of forms.

Default

Simple example of a Form.

Sign In

Email address Please enter a valid email.

Password

Remember me

Forgot your password?

Don't have an account yet? Sign up.

HTML

JSX

<div class="mx-auto flex w-full max-w-sm flex-col gap-6">
	<div class="flex flex-col items-center">
		<h1 class="text-3xl font-semibold">Sign In</h1>
		<p class="text-sm">Sign in to access your account</p>
	</div>
	<div class="form-group">
		<div class="form-field">
			<label class="form-label">Email address</label>

			<input placeholder="Type here" type="email" class="input max-w-full" />
			<label class="form-label">
				<span class="form-label-alt">Please enter a valid email.</span>
			</label>
		</div>
		<div class="form-field">
			<label class="form-label">Password</label>
			<div class="form-control">
				<input placeholder="Type here" type="password" class="input max-w-full" />
			</div>
		</div>
		<div class="form-field">
			<div class="form-control justify-between">
				<div class="flex gap-2">
					<input type="checkbox" class="checkbox" />
					<a href="#">Remember me</a>
				</div>
				<label class="form-label">
					<a class="link link-underline-hover link-primary text-sm">Forgot your password?</a>
				</label>
			</div>
		</div>
		<div class="form-field pt-5">
			<div class="form-control justify-between">
				<button type="button" class="btn btn-primary w-full">Sign in</button>
			</div>
		</div>

		<div class="form-field">
			<div class="form-control justify-center">
				<a class="link link-underline-hover link-primary text-sm">Don't have an account yet? Sign up.</a>
			</div>
		</div>
	</div>
</div>

Form with authentication providers

Examples using authentication providers.

HTML

JSX

<form class="mx-auto flex w-full max-w-lg flex-col rounded-xl border border-border bg-backgroundSecondary p-4 sm:p-20">
	<div class="flex w-full flex-col gap-2">
		<p>Sign in with</p>
		<div class="flex w-full flex-col gap-2">
			<button type="button" class="btn gap-2 bg-gray-5">
				<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 48 48" enablebackground="new 0 0 48 48" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
					<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
					<path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657        C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
					<path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36        c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
					<path
						fill="#1976D2"
						d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571
              c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
					></path>
				</svg>
				<span>Sign up with google</span>
			</button>
			<button type="button" class="btn gap-2 bg-gray-5">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-5 w-5 fill-primary">
					<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
				</svg>
				<span>Sign up with twitter</span>
			</button>
			<button type="button" class="btn gap-2 bg-gray-5">
				<svg width="21" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
					<path
						fill="currentColor"
						d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
					></path>
				</svg>

				<span>Sign up with github</span>
			</button>
		</div>
	</div>
	<div class="divider my-6 text-xs text-content2">or continue with</div>

	<div class="form-group">
		<div class="form-field">
			<label class="form-label">Email address</label>

			<input placeholder="Type here" type="email" class="input max-w-full" />
			<label class="form-label">
				<span class="form-label-alt">Please enter a valid email.</span>
			</label>
		</div>
		<div class="form-field">
			<label class="form-label">
				<span>Password</span>
			</label>
			<div class="form-control">
				<input placeholder="Type here" type="password" class="input max-w-full" />
			</div>
		</div>
		<div class="form-field">
			<div class="form-control justify-between">
				<div class="flex gap-2">
					<input type="checkbox" class="checkbox" />
					<a href="#">Remember me</a>
				</div>
				<label class="form-label">
					<a class="link link-underline-hover link-primary text-sm">Forgot your password?</a>
				</label>
			</div>
		</div>
		<div class="form-field pt-5">
			<div class="form-control justify-between">
				<button type="button" class="btn btn-primary w-full">Sign in</button>
			</div>
		</div>

		<div class="form-field">
			<div class="form-control">
				<a class="link link-underline-hover link-primary text-sm">Don't have an account? Sign in</a>
			</div>
		</div>
	</div>
</form>

Open Modal

HTML

JSX

<article>
	<label class="btn btn-primary" for="modal-1">Open Modal</label>

	<input class="modal-state" id="modal-1" type="checkbox" />
	<div class="modal">
		<label class="modal-overlay" for="modal-1"></label>
		<div class="modal-content flex w-full flex-col gap-5 p-7">
			<label for="modal-1" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
			<div class="flex flex-col gap-2">
				<h2 class="text-center text-2xl font-semibold">Sign In</h2>
				<p class="mx-auto max-w-xs text-sm text-content2">Sign in to your account to continue.</p>
			</div>

			<section>
				<div class="form-group">
					<div class="form-field">
						<label class="form-label">Email address</label>
						<input placeholder="Type here" type="email" class="input max-w-full" />
						<label class="form-label">
							<span class="form-label-alt">Please enter a valid email.</span>
						</label>
					</div>

					<div class="form-field">
						<label class="form-label">
							<span>Password</span>
						</label>
						<div class="form-control">
							<input placeholder="Type here" type="password" class="input max-w-full" />
						</div>
					</div>

					<div class="form-field">
						<div class="form-control justify-between">
							<div>
								<input type="checkbox" class="checkbox" />
								<a href="#">Remember me</a>
							</div>
							<label class="form-label">
								<a class="link link-underline-hover link-primary text-sm">Forgot your password?</a>
							</label>
						</div>
					</div>

					<div class="form-field pt-5">
						<div class="form-control justify-between">
							<button type="button" class="btn btn-primary w-full">Sign in</button>
						</div>
					</div>
				</div>
				<div class="divider text-sm">Login with social accounts</div>

				<div class="flex justify-center space-x-4">
					<button type="button" aria-label="Log in with Google" class="rounded-sm p-3">
						<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 48 48" enable-background="new 0 0 48 48" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
							<path
								fill="#FFC107"
								d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12
                    c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24
                    c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
							></path>
							<path
								fill="#FF3D00"
								d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657
                    C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
							></path>
							<path
								fill="#4CAF50"
								d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36
                    c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
							></path>
							<path
								fill="#1976D2"
								d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571
                    c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
							></path>
						</svg>
					</button>
					<button type="button" aria-label="Log in with Twitter" class="rounded-sm p-3">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-5 w-5 fill-primary">
							<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
						</svg>
					</button>
					<button type="button" aria-label="Log in with GitHub" class="rounded-sm p-3">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="h-5 w-5 fill-current">
							<path
								d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"
							></path>
						</svg>
					</button>
				</div>
				<div class="items-center justify-center text-xs dark:text-gray-5 sm:px-6 flex gap-2">
					<span>Don't have an account?</span>
					<a rel="noopener noreferrer" href="#" class="link link-primary text-xs">Sign up</a>
				</div>
			</section>
		</div>
	</div>
</article>

States

You can use the following code to display error or success messages.

Email address Alternative Please enter a valid email. Alternative

Email address Please enter a valid email.

HTML

JSX

<div class="form-group">
	<div class="form-field">
		<label class="form-label text-error">
			Email address
			<span class="form-label-alt text-error">Alternative</span>
		</label>

		<input placeholder="Type here" type="email" class="input max-w-full input-error" />
		<label class="form-label">
			<span class="form-label-alt text-error">Please enter a valid email.</span>
			<span class="form-label-alt text-error">Alternative</span>
		</label>
	</div>
	<div class="form-field">
		<label class="form-label text-success">Email address</label>

		<input placeholder="Type here" type="email" class="input max-w-full input-success" />
		<label class="form-label">
			<span class="form-label-alt text-success">Please enter a valid email.</span>
		</label>
	</div>

	<div class="form-field">
		<label class="form-label text-warning">Email address</label>

		<input placeholder="Type here" type="email" class="input max-w-full input-warning" />
		<label class="form-label">
			<span class="form-label-alt text-warning">Please enter a valid email.</span>
		</label>
	</div>
</div>

Forms with icons

You can set icons to the left or right of the input.

HTML

JSX

<div class="form-group">
	<div class="form-control relative w-full">
		<input type="password" class="input input-lg max-w-full" placeholder="Enter password" />

		<span class="absolute inset-y-0 right-4 inline-flex items-center">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-content3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
			</svg>
		</span>
	</div>
	<div class="form-control relative w-full">
		<input type="email" class="input input-lg max-w-full" placeholder="Enter email" />

		<span class="absolute inset-y-0 right-4 inline-flex items-center">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-content3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
			</svg>
		</span>
	</div>

	<div class="form-control relative w-full">
		<input type="email" class="input input-lg max-w-full pl-10" placeholder="Enter email" />

		<span class="absolute inset-y-0 left-3 inline-flex items-center">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-content3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
			</svg>
		</span>
	</div>

	<div class="form-control relative w-full">
		<input type="password" class="input input-lg max-w-full pl-10" placeholder="Enter password" />

		<span class="absolute inset-y-0 left-3 inline-flex items-center">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-content3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
			</svg>
		</span>
	</div>
</div>

API

`Form Classes`

className	Description
form-group	wrapper to agrupate a form
form-field	wrapper for a form-label, form-label-alt and form-control
form-label	add styles to a title of form element
form-label-alt	className to display any important information like error, success
form-control	wrapper for input, textarea, select, checkbox or any other form element

Dropdown Input

Edit this page on GitHub

Forms

​Default

Sign In

​Form with authentication providers

​Form inside a modal

Sign In

​States

​Forms with icons

​API

`Form Classes`

Default

Form with authentication providers

Form inside a modal

States

Forms with icons

API