Get Started
Backend
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- Authentication
- Background Workers
- Billing & Payments
- Credentials
- Cron & Scheduled Jobs
- Databases
- Development
- Scaffolds
- Teams
- Users
- Webpacker
Frontend
Extras
Forms
Block
<form action="#">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Johnny Knoxville">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" name="website" class="form-control error" value="My Website">
<p class="form-hint error">Please enter a valid URL</p>
</div>
<div class="form-group">
<span class="label">Avatar</span>
<input type="file" name="avatar" class="form-control form-file" data-multiple-caption="{count} files selected" multiple>
<label for="avatar">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="abfjcc7qehef40bq2p3xcefy6sq22sr0" class="fill-current icon-sm mr-2"><title id="abfjcc7qehef40bq2p3xcefy6sq22sr0">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
<span>Upload Avatar</span>
</label>
</div>
<div class="form-group">
<label for="industry">Industry</label>
<div class="relative">
<select name="industry" class="select">
<option value="" selected>Choose an industry</option>
<option value="tech">Tech</option>
<option value="marketing">Marketing</option>
<option value="health_science">Health & Science</option>
</select>
<div class="caret">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="a18kpz9n3p56ph5yoyjrqmvj4ahn5q3m" class="fill-current h-4 w-4"><title id="a18kpz9n3p56ph5yoyjrqmvj4ahn5q3m">Icons/caret</title><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
</div>
</div>
</div>
</form>Inline
<form action="#">
<div class="form-group flex flex-wrap items-center justify-start">
<label for="name" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Name</label>
<input type="text" name="name" class="form-control lg:flex-1">
</div>
<div class="form-group flex flex-wrap items-center justify-start">
<label for="email" class="lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Email</label>
<input type="email" name="email" class="form-control lg:flex-1">
</div>
<div class="form-group flex flex-wrap items-center justify-start">
<label for="website" class="lg:w-1/6 lg:text-right lg:pr-4 lg:-mt-4">Website</label>
<div class="lg:flex-1 w-full">
<input type="url" name="website" class="form-control error" value="My Website">
<p class="form-hint w-full error">Please enter a valid URL</p>
</div>
</div>
<div class="form-group flex flex-wrap items-center justify-start">
<span class="label lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Avatar</span>
<div class="lg:flex-1 w-full">
<input type="file" name="avatar" class="form-control form-file" data-multiple-caption="{count} files selected" multiple>
<label for="avatar">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a56vi666dvnjlpyafrkgh9flovtsed31" class="fill-current icon-sm mr-2"><title id="a56vi666dvnjlpyafrkgh9flovtsed31">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>
<span>Upload Avatar</span>
</label>
</div>
</div>
<div class="form-group flex flex-wrap items-center justify-start">
<label for="industry" class="label lg:w-1/6 lg:text-right lg:pr-4 lg:mt-2">Industry</label>
<div class="relative lg:flex-1 w-full">
<select name="industry" class="select">
<option value="" selected>Choose an industry</option>
<option value="tech">Tech</option>
<option value="marketing">Marketing</option>
<option value="health_science">Health & Science</option>
</select>
<div class="caret">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" role="img" aria-labelledby="akug0lklu0qrwprapkdfsmrqzosbhurg" class="fill-current h-4 w-4"><title id="akug0lklu0qrwprapkdfsmrqzosbhurg">Icons/caret</title><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
</div>
</div>
</div>
</form>