Please wait...

Try Sallira with other theme and color combinations
Index variants
Color options

Theme components

  1. Home
  2. Components
  3. Form
Form control

<input type="text" class="form-control" placeholder="Text input" />

<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
  <option value="v1">Select options</option>
  <option value="v2">Option 1</option>
  <option value="v2">Option 2</option>
  <optgroup label="Option heading">
    <option value="v25">Option 3</option>
    <option value="v26">Option 4</option>
  </optgroup>
  <option value="v2">Option 5</option>
  <option value="v2">Option 6</option>
</select>

<select class="multitest" size="7" multiple>
  <optgroup label="Multiple select test">
    <option>Option 1</option>
    <option>Option 2</option>
  </optgroup>
  <optgroup label="heading group">
    <option>Option 3</option>
    <option>Option 4</option>
     <option>Option 5</option>
     <option>Option 6</option>
  </optgroup>
  <option>Option 7</option>
  <option>Option 8</option>
</select>

<textarea class="form-control" rows="3" placeholder="Textarea input"></textarea>

<div class="checkbox">
	<label>
		<input type="checkbox" value="check1">
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled>
		Option two is disabled
	</label>
</div>

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		Option two can be something else and selecting it will deselect option one
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
		Option three is disabled
	</label>
</div>
Basic form

Example block-level help text here.

<form>
	<div class="form-group">
		<label>Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" />
	</div>
	<div class="form-group">
		<label>Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
	</div>
	<div class="form-group">
		<label>File input</label>
		<input type="file" id="exampleInputFile">
		<p class="help-block">Example block-level help text here.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form height sizing

<input type="text" class="form-control input-lg" placeholder="Large size" />
<input type="text" class="form-control" placeholder="Default size" />
<input type="text" class="form-control input-sm" placeholder="Small size" />
<input type="text" class="form-control input-xs" placeholder="Extra small size" />
Inline form
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="exampleInputEmail3">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
	</div>
	<div class="form-group">
		<label class="sr-only" for="exampleInputPassword3">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Remember me
		</label>
	</div>
	<button type="submit" class="btn btn-primary">Sign in</button>
</form>

<form class="form-inline">
	<div class="form-group">
		<label for="exampleInputName2">Name</label>
		<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
	</div>
	<div class="form-group">
		<label for="exampleInputEmail2">Email</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
	</div>
	<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
$
.00
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Amount (in dollars)</label>
		<div class="input-group">
			<div class="input-group-addon">$</div>
			<input type="text" class="form-control" placeholder="Amount">
			<div class="input-group-addon">.00</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Form column sizing
<div class="col-xs-2">
	<input type="text" class="form-control" placeholder=".col-xs-2">
</div>

<div class="col-xs-3">
	<input type="text" class="form-control" placeholder=".col-xs-3">
</div>

<div class="col-xs-4">
	<input type="text" class="form-control" placeholder=".col-xs-4">
</div>

<div class="col-xs-3">
	<input type="text" class="form-control" placeholder=".col-xs-3">
</div>

<div class="col-xs-6">
	<input type="text" class="form-control" placeholder=".col-xs-6">
</div>

<div class="col-xs-6">
	<input type="text" class="form-control" placeholder=".col-xs-6">
</div>

<div class="col-xs-5">
	<input type="text" class="form-control" placeholder=".col-xs-5">
</div>

<div class="col-xs-7">
	<input type="text" class="form-control" placeholder=".col-xs-7">
</div>

<div class="col-xs-9">
	<input type="text" class="form-control" placeholder=".col-xs-9">
</div>

<div class="col-xs-3">
	<input type="text" class="form-control" placeholder=".col-xs-3">
</div>