Sign In
Sign in to your account to continue.
Login with social accounts
Don't have an account?Sign up
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
Sign in to access your account
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>
āSolid Variant
Solid variant of the form.
HTML
JSX
<section class="bg-gray-2 rounded-xl"><div class="p-8 shadow-lg"><form class="space-y-4"><div class="w-full"><label class="sr-only" for="name">Name</label><input class="input input-solid max-w-full" placeholder="Name" type="text" id="name" /></div><div class="grid grid-cols-1 gap-4 sm:grid-cols-2"><div><label class="sr-only" for="email">Email</label><input class="input input-solid" placeholder="Email address" type="email" id="email" /></div><div><label class="sr-only" for="phone">Phone</label><input class="input input-solid" placeholder="Phone Number" type="tel" id="phone" /></div></div><div class="w-full"><label class="sr-only" for="message">Message</label><textarea class="textarea textarea-solid max-w-full" placeholder="Message" rows="8" id="message"></textarea></div><div class="mt-4"><button type="button" class="rounded-lg btn btn-primary btn-block">Send Enquiry</button></div></form></div></section>
ā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><pathfill="#1976D2"d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.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"><pathfill="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>
āForm inside a modal
Login form inside a 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"><pathfill="#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><pathfill="#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.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><pathfill="#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,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><pathfill="#1976D2"d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.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"><pathd="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.
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
| className | Description |
|---|---|
| form-group | wrapper to agrupate a form |
| form-field | wrapper htmlFor 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 htmlFor input, textarea, select, checkbox or any other form element |