• Valclass | UI
  • Chameleon admin logo

    Valclass

  • Dashboard
  • V-class
  • V-navbar
  • V-table
  • V-btn
  • V-alert
  • V-modal
  • V-form
  • V-card

form

Utilities to quickly create form views.

List of properties and components
Class
v-form
v-form-section
v-form-checkbox
v-form-caption
v-form-label
v-btn-submit
v-checkbox

form-1

We'll never share your email with anyone else. 
							

			<div class="v-form v-font-poppins" style="width: 600px;">
				<form>
					<div class="v-form-section v-rows-2">
						<div>
							<label class="v-form-label">Email</label>
							<input type="email" name="">
							<small class="v-form-caption">We'll never share your email with anyone else.</small>
						</div>
						<div>
							<label class="v-form-label">Username</label>
							<input type="text" name="">
						</div>
					</div>

					<div class="v-form-section v-row">
						<label class="v-form-label">Password</label>
						<input type="password" name="">
					</div>

					<div class="v-form-section v-row">
						<button class="v-btn-submit v-primary">Send message</button>
					</div>
				</form>
			</div>

form 1

form-2

We'll never share your email with anyone else.
Cannot be longer than 8 characters 
							

			<div class="v-form v-font-poppins" style="width: 600px;">
				<form>
					<div class="v-form-section v-row">
						<div>
							<label class="v-form-label">Email</label>
							<input type="email" name="">
							<small class="v-form-caption">We'll never share your email with anyone else.</small>
						</div>
					</div>

					<div class="v-form-section v-row">
						<label class="v-form-label">Password</label>
						<input type="password" name="">
					</div>

					<div class="v-form-section v-row">
						<button class="v-btn-submit v-primary">Send message</button>
					</div>
				</form>
			</div>

form 2

form-3

We'll never share your email with anyone else. 
							

			<div class="v-form v-font-poppins" style="width: 600px;">
				<form>
					<div class="v-form-section v-row">
						<div>
							<label class="v-form-label">Email</label>
							<input type="email" name="">
							<small class="v-form-caption">We'll never share your email with anyone else.</small>
						</div>
					</div>

					<div class="v-form-checkbox v-row">
						<input type="checkbox" class="v-checkbox">
						<label>Remember me</label>
					</div>

					<div class="v-form-section v-row">
						<button class="v-btn-submit v-primary">Send message</button>
					</div>
				</form>
			</div>

form 3

form-4

We'll never share your email with anyone else. 
							

			<div class="v-form v-font-poppins" style="width: 600px;">
				<form>
					<div class="v-form-section v-row">
						<div>
							<label class="v-form-label">Email</label>
							<input type="email" name="" placeholder="disabled input" disabled>
							<small class="v-form-caption">We'll never share your email with anyone else.</small>
						</div>
					</div>

					<div class="v-form-checkbox v-row">
						<input type="checkbox" class="v-checkbox" disabled>
						<label>Remember me</label>
					</div>

					<div class="v-form-section v-row">
						<button class="v-btn-submit v-primary" disabled>Send message</button>
					</div>
				</form>
			</div>

form 4

2021 © Copyright valclass