Checkboxes - Stacked

<div class="form-group">
				<div class="form-check">
					<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
					<label class="form-check-label" for="defaultCheck1">
						Checkbox 1
					</label>
				</div>
				<div class="form-check">
					<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
					<label class="form-check-label" for="defaultCheck2">
						Checkbox 2
					</label>
				</div>
				<div class="form-check">
					<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
					<label class="form-check-label" for="defaultCheck3">
						Checkbox 3
					</label>
				</div>
			</div>
				

Checkboxes - Inline

<div class="form-group">
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
					<label class="form-check-label" for="inlineCheckbox1">1</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
					<label class="form-check-label" for="inlineCheckbox2">2</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
					<label class="form-check-label" for="inlineCheckbox3">3</label>
				</div>
			</div>

Radio Buttons - Stacked

<div class="form-group">
					<div class="form-check">
						<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
						<label class="form-check-label" for="exampleRadios1">
							First radio button
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
						<label class="form-check-label" for="exampleRadios2">
							Second radio button
						</label>
					</div>
					<div class="form-check disabled">
						<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">
						<label class="form-check-label" for="exampleRadios3">
							Third radio button
						</label>
					</div>
				</div>

Radio Buttons - Inline

<div class="form-group">
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
					<label class="form-check-label" for="inlineRadio1">1</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
					<label class="form-check-label" for="inlineRadio2">2</label>
				</div>
				<div class="form-check form-check-inline">
					<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
					<label class="form-check-label" for="inlineRadio3">3</label>
				</div>
			</div>

Calendar Widget

<div class="form-group">
	<input type="date" class="form-control">
</div>

Finish Selector

The Finish Selector uses the select2 library to override the default select behavior and show a custom select box with previews of the possible finishes.

The finish selector javascript is located in modules/finishSelector.ts. This code is only included on the src/js/NHW/controllers/product-detail.ts javascript controller, not globally, and therefore will not work on this page. Please visit "Other Product Related Modules" section to see a working example of the finish selector.

<div class="form-group">
				<label for="finishSelector">Finish</label>
				<select name="finish" class="custom-select js-select-finish" id="finishSelector">
					<option data-finish="oil-rubbed-bronze">Oil Rubbed Bronze</option>
					<option data-finish="antique-bronze">Antique Bronze</option>
					<option data-finish="pewter">Pewter</option>
					<option data-finish="white">White</option>
					<option data-finish="antique-brass">Antique Brass</option>
					<option data-finish="yellow">Yellow</option>
					<option data-finish="stainless-steel">Stainless Steel</option>
					<option data-finish="plain-steel">Plain Steel</option>
					<option data-finish="camo">Camo</option>
				</select>
			</div>

Text Input w/Label

<div class="form-group">
	<label for="example-text-input1">Field Label</label>
	<input type="text" id="example-text-input1" name="example-text-input1" class="form-control" placeholder="Enter Field Value">
</div>

Inputs (Error State)

<div class="form-group has-error">
	<label for="example-text-input2">Input</label>
	<input type="text" id="example-text-input2" name="example-text-input2" class="form-control" placeholder="Enter Field Value">
	<div class="form-error-message">Please enter a value for this field</div>
</div>

<div class="faux-label">Checkbox</div>
<div class="form-group checkbox has-error">
	<label>
		<input type="checkbox" checked>
		<span class="checkbox__text">Checkbox 1</span>
	</label>
	<div class="form-error-message">Please check the checkbox</div>
</div>

<div class="faux-label">Radio</div>
<div class="form-group radio has-error">
	<label>
		<input type="radio" name="test" checked>
		<span class="radio__text">Radio Option 1</span>
	</label>
	<div class="form-error-message">Please select an option</div>
</div>

<div class="form-group has-error">
	<label for="error-select">Select Menu</label>
	<select name="example-select" id="error-select" class="form-control">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
		<option value="option5">Option 5</option>
	</select>
	<div class="form-error-message">Please select an option</div>
</div>

Text Input w/Button

<div class="input-group">
				<input type="text" class="form-control" placeholder="Enter Email Address">
				<div class="input-group-append">
					<button class="btn btn-primary" id="basic-addon2">Sign Up</button>
				</div>
			</div>

Select Menu

<select class="custom-select">
				<option selected>Open this select menu</option>
				<option value="1">One</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</select>

Textarea

File Input

The .file-input module has a small JavaScript function (contained in NHW/modules/fileInput.ts) that displays the name of the selected file.

Also note that this File Input Field is only for custom form implementations. Sitefinity has a built in file input field that has custom logic where overwriting can be difficult and is generally frowned upon

<div class="form-group file-input">
				<div class="input-group mb-3">
					<div class="custom-file">
						<input type="file" class="custom-file-input" id="inputGroupFile01">
						<label class="custom-file-label custom-file-label--black" for="inputGroupFile01">Choose file</label>
					</div>
				</div>
				<div class="file-input__value js-file-input-value"></div>
			</div>