Forms

Famous UI provides an easiest way to create nicer looking input fields
just add .fui-input class to input elements.

Use .group inside form to group inputs, .group will add padding-top: 10px and padding-bottom: 10px

Example



Single Input

<!-- INPUT -->
				<div class="group">
				<input type="text" class="fui-input">
				</div>

To group checkbox or radio button simply wrap inside .checkbox-group or .radio-group

Checkbox Group

<!-- CHECKBOX -->
				<div class="checkbox-group group">
				<input type="checkbox" id="confirmField">
				<label for="confirmField">Check Box</label>
				</div>

Radio Button

<!-- RADIO BUTTON -->
				<div class="radio-group group">
				<input type="radio" id="confirmField1">
				<label for="confirmField1">Radio Button Group</label>
				</div>

Form with Grid

Snippet for above form

<form class="py-4" method="" action="">
				<div class="row">

					<div class="col-md-6">
							<div class="group">
									<input type="text" class="fui-input" placeholder="First Name">
							</div>
							<div class="group">
									<input type="text" class="fui-input" placeholder="Last Name">
							</div>
					</div>

					<div class="col-md-6">
							<div class="group">
									<input type="email" class="fui-input" placeholder="Your Email">
							</div>
							<div class="group">
									<input type="tel" class="fui-input" placeholder="Phone Number">
							</div>
					</div>

					<div class="col-md-12">
							<div class="group">
									<textarea class="fui-input" placeholder="Message"></textarea>
							</div>

							<div class="group">
									<input class="fui-btn fui-btn-primary btn-lg uppercase" type="submit" value="Send">
							</div>
					</div>
				</div>

				</form>

Custom Checkboxes

Custom Checkbox, simple wrap checkbox and label with .custom-checkbox

<!-- CHECKBOX -->
				<div class="group">
				<div class="custom-checkbox">
					<input type="checkbox" id="custom-checkbox-1" checked>
					<label for="custom-checkbox-1">Custom Check Box</label>
				</div>
				</div>

Custom Radio Buttons

Custom Radio, simple wrap radio and label with .custom-radio 

<!-- RADIO -->
				<div class="group">
				<div class="custom-radio">
					<input type="radio" name="same" id="custom-radio-1" checked>
					<label for="custom-radio-1">Custom Radio Button</label>
				</div>
				</div>