smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
889 lines (770 loc) • 34 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Material Bootstrap Forms | https://www.htmlelements.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
<script type="text/javascript" src="../../scripts/common.js"></script>
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="../source/smart.element.js"></script>
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
<script src="index.js"></script>
</head>
<body class="smart viewport">
<h2 id="forms">Material Bootstrap Forms</h2>
<p>
Examples and usage guidelines for form component styles, layout options, and custom components for
creating a wide variety of forms.
</p>
<h2>Overview</h2>
<p>Here’s a quick example to demonstrate Smart.Core’s form styles. Keep reading for documentation on
required classes, form layout, and more.</p>
<div class="group">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-component" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-component" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<bootstrap-button type="submit" style-mode="primary">Submit</bootstrap-button>
</form>
</div>
<h2>Form components</h2>
<p>Textual form components—like <input>s, <select>s, and <textarea>s—are styled with the
.form-component class. Included are styles for general appearance, focus state, sizing, and more.
</p>
<div class="group">
<form>
<div class="form-group">
<label for="exampleFormComponentInput1">Email address</label>
<input type="email" class="form-component" id="exampleFormComponentInput1"
placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormComponentSelect1">Example select</label>
<select class="form-component" id="exampleFormComponentSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormComponentSelect2">Example multiple select</label>
<select multiple="" class="form-component" id="exampleFormComponentSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormComponentTextarea1">Example textarea</label>
<textarea class="form-component" id="exampleFormComponentTextarea1" rows="3"></textarea>
</div>
</form>
</div>
<h2>Sizing</h2>
<p>Set heights using classes like .form-component-lg and .form-component-sm.</p>
<div class="group">
<input class="form-component form-component-lg" type="text" placeholder=".form-component-lg">
<input class="form-component" type="text" placeholder="Default input">
<input class="form-component form-component-sm" type="text" placeholder=".form-component-sm">
</div>
<div class="group">
<select class="form-component form-component-lg">
<option>Large select</option>
</select>
<select class="form-component">
<option>Default select</option>
</select>
<select class="form-component form-component-sm">
<option>Small select</option>
</select>
</div>
<h2>Readonly plain text</h2>
<p>
If you want to have <input readonly> elements in your form styled as plain text, use the
.form-component-plaintext class to remove the default form field styling and preserve the correct
margin and padding.
</p>
<div class="group">
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-component-plaintext" id="staticEmail"
value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-component" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="group">
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-component-plaintext" id="staticEmail2"
value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-component" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="button button-info mb-2">Confirm identity</button>
</form>
</div>
<h2>Range Inputs</h2>
<p>
Set horizontally scrollable range inputs using .form-component-range.
</p>
<div class="group">
<form>
<div class="form-group">
<label for="formComponentRange">Example Range input</label>
<input type="range" class="form-component-range" id="formComponentRange">
</div>
</form>
</div>
<h2>Checkboxes and radios</h2>
<p>
Default checkboxes and radios are improved upon with the help of .form-check, a single class for
both input types that improves the layout and behavior of their HTML elements. Checkboxes are for
selecting one or several options in a list, while radios are for selecting one option from many.
</p>
<p>
Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to
help indicate the input’s state.
</p>
<p>
Checkboxes and radios use are built to support HTML-based form validation and provide concise,
accessible labels. As such, our <input≶s and <label≶s are sibling elements as opposed to
an <input≶
within a <label≶. This is slightly more verbose as you must specify id and for attributes to
relate the <input≶ and <label≶.
</p>
<h2>Default (stacked)</h2>
<div class="group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
</div>
<h2>Inline</h2>
<p>Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any
.form-check.</p>
<div class="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" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
<h2>Horizontal form</h2>
<p>Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-*
classes to specify the width of your labels and components. Be sure to add .col-form-label to your
<label>s as well so they’re vertically centered with their associated form components..</p>
<div class="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" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
<h2>Layout</h2>
<p>Since Material Bootstrap applies display: block and width: 100% to almost all our form components, forms will by
default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
</p>
<h2>Form groups</h2>
<p>
The .form-group class is the easiest way to add some structure to forms. It provides a flexible
class that encourages proper grouping of labels, components, optional help text, and form validation
messaging. By default it only applies margin-bottom, but it picks up additional styles in
.form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.
</p>
<div class="group">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-component" id="formGroupExampleInput"
placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-component" id="formGroupExampleInput2"
placeholder="Another input">
</div>
</form>
</div>
<h2>Form grid</h2>
<p>
More complex forms can be built using our grid classes. Use these for form layouts that require
multiple columns, varied widths, and additional alignment options.
</p>
<div class="group">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-component" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-component" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-component" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-component" id="inputAddress2"
placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-component" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-component">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-component" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="button button-primary">Sign in</button>
</form>
</div>
<h2>Form row</h2>
<p>
You may also swap .row for .form-row, a variation of our standard grid row that overrides the
default column gutters for tighter and more compact layouts.
</p>
<P>
Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to
correctly follow the size of .form-component-lg and .form-component-sm.
</P>
<div class="group">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-component" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-component" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1"
value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2"
value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3"
value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="button button-secondary">Sign in</button>
</div>
</div>
</form>
</div>
<h2>Column sizing</h2>
<p>
As shown in the previous examples, our grid system allows you to place any number of .cols within a
.row or .form-row. They’ll split the available width equally between them. You may also pick a
subset of your columns to take up more or less space, while the remaining .cols equally split the
rest, with specific column classes like .col-7.
</p>
<div class="group">
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-component" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-component" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-component" placeholder="Zip">
</div>
</div>
</form>
</div>
<h2>Inline forms</h2>
<p>
Use the .form-inline class to display a series of labels, form components, and buttons on a single
horizontal row. Form components within inline forms vary slightly from their default states.
</p>
<ul>
<li>Components are <code class="highlighter-rouge">display: flex</code>, collapsing any HTML white
space and allowing you to provide alignment component with spacing and flexbox utilities.</li>
<li>Components and input groups receive <code class="highlighter-rouge"></code>width: auto</code> to
override
the Material Bootstrap default <code class="highlighter-rouge">width: 100%</code>.</li>
<li>Components <strong>only appear inline in viewports that are at least 576px wide</strong> to
account for narrow viewports on mobile devices.</li>
</ul>
<p>
You may need to manually address the width and alignment of individual form components with spacing
utilities (as shown below). Lastly, be sure to always include a <label> with each form
component, even
if you need to hide it from non-screenreader visitors with .sr-only.
</p>
<div class="group">
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-component mb-2 mr-sm-2" id="inlineFormInputName2"
placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-component" id="inlineFormInputGroupUsername2"
placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="button button-primary mb-2">Submit</button>
</form>
</div>
<h2>Disabled forms</h2>
<p>
Add the disabled boolean attribute on an input to prevent user interactions and make it appear
lighter.
</p>
<figure class="highlight">
<pre
class="prettyprint"><input class="form-component" id="disabledInput" type="text" placeholder="Disabled input here..." disabled></pre>
</figure>
<p>Add the disabled attribute to a <fieldset> to disable all the components within.</p>
<div class="group">
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-component"
placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-component">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="button">Submit</button>
</fieldset>
</form>
</div>
<h2>Validation</h2>
<p>
Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our
supported browsers. Choose from the browser default validation feedback, or implement custom
messages with our built-in classes and starter JavaScript.
</p>
<h3>How it works</h3>
<p>Here’s how form validation works with Material Bootstrap:</p>
<ul>
<li>HTML form validation is applied via CSS’s two pseudo-classes, <code
class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code>.
It applies to <code class="highlighter-rouge"><input></code>, <code
class="highlighter-rouge"><select></code>, and <code
class="highlighter-rouge"><textarea></code> elements.</li>
<li>Material Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code
class="highlighter-rouge">:valid</code> styles to parent <code
class="highlighter-rouge">.was-validated</code> class, usually applied to the <code
class="highlighter-rouge"><form></code>. Otherwise, any required field without a value
shows up as invalid on page load. This way, you may choose when to activate them (typically
after form submission is attempted).</li>
<li>To reset the appearance of the form (for instance, in the case of dynamic form submissions using
AJAX), remove the <code class="highlighter-rouge">.was-validated</code> class from the <code
class="highlighter-rouge"><form></code> again after submission.</li>
</ul>
<p>
With that in mind, consider the following demos for our custom form validation styles, optional
server side classes, and browser defaults.
</p>
<h3>Custom styles</h3>
<p>
For custom Material Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute
to your <form>. This disables the browser default feedback tooltips, but still provides access
to
the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will
intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the
:invalid and :valid styles applied to your form components.
</p>
<div class="group">
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<bootstrap-input type="text" id="validationCustom01" placeholder="First name"
value="Mark" required></bootstrap-input>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<bootstrap-input type="text" id="validationCustom02" placeholder="Last name"
value="Otto" required></bootstrap-input>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<bootstrap-input type="text" id="validationCustomUsername"
placeholder="Username" aria-describedby="inputGroupPrepend" required></bootstrap-input>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<bootstrap-input type="text" id="validationCustom03" placeholder="City"
required></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<bootstrap-input type="text" id="validationCustom04" placeholder="State"
required></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<bootstrap-input type="text" id="validationCustom05" placeholder="Zip"
required></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<bootstrap-check-box type="checkbox" value="" id="invalidCheck" required>Agree to terms and conditions</bootstrap-check-box>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="button button-success" type="submit">Submit form</button>
</form>
</div>
<h2>Custom forms</h2>
<p>
For even more customization and cross browser consistency, use our completely custom form elements
to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re
solid replacements for any default form component.
</p>
<h3>Checkboxes and radios</h3>
<p>
The "bootstrap-check-box" and "bootstrap-radio-button" tags display checkboxes and radiobuttons.
</p>
<h3>Checkboxes</h3>
<div class="group">
<bootstrap-check-box>Check me</bootstrap-check-box>
</div>
<p>The following code should set the checkbox input to inditerminate state</p>
<div class="group">
<bootstrap-check-box indeterminate>Check me</bootstrap-check-box>
</div>
<h3>Radios</h3>
<div class="group">
<bootstrap-radio-button>Radio 1</bootstrap-radio-button>
<bootstrap-radio-button>Radio 2</bootstrap-radio-button>
</div>
<h3>Switches</h3>
<p>
The "bootstrap-switch-button" tag renders a custom switch.
</p>
<div class="group">
<bootstrap-switch-button>Off</bootstrap-switch-button>
<bootstrap-switch-button checked>On</bootstrap-switch-button>
</div>
<h3>Select menu</h3>
<p>
Custom <select> menus need only a custom class, .select to trigger the custom styles.
Custom
styles are limited to the <select>’s initial appearance and cannot modify the <option>s
due to
browser limitatio
</p>
<div class="group">
<select class="select select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="select select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<h2>Range</h2>
<p>
Create custom <input type="range"> components with .range. The track (the background) and
thumb
(the value) are both styled to appear the same across browsers. As only IE and Firefox support
“filling” their track from the left or right of the thumb as a means to visually indicate progress,
we do not currently support it.
</p>
<div class="group">
<bootstrap-range></bootstrap-range>
</div>
<h2>File browser</h2>
<p>
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to
hook them up with functional Choose file… and selected file name text.
</p>
<div class="group">
<div class="file">
<input type="file" class="file-input" id="customFile">
<label class="file-label" for="customFile">Choose file</label>
</div>
</div>
<p>
We hide the default file <input> via opacity and instead style the <label>. The button
is generated
and positioned with ::after. Lastly, we declare a width and height on the <input> for proper
spacing for surrounding content.
</p>
<h3>Progress</h3>
The "bootstrap-progress-bar" is the custom element which displays a Progress bar.
<div>
<bootstrap-progress-bar value=25 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="info" value=50 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="success" value=75 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="warning" value=100 max=100 min=0></bootstrap-progress-bar><br/>
</div>
By adding the 'striped' attribute adds stripes to the progress.
<div>
<bootstrap-progress-bar striped style-mode="danger" value=50 max=100 min=0></bootstrap-progress-bar>
</div>
<br/>
<br/>
<h2>Material Design</h2>
<h3>Switches</h3><br/>
<div class="smart material">
<bootstrap-switch-button>Off</bootstrap-switch-button>
<bootstrap-switch-button checked>On</bootstrap-switch-button>
</div><br/>
<h3>Radio Buttons</h3><br/>
<div class="smart material">
<bootstrap-radio-button>Off</bootstrap-radio-button>
<bootstrap-radio-button checked>On</bootstrap-radio-button>
</div> <br/>
<h3>Checkbox</h3><br/>
<div class="smart material">
<bootstrap-check-box>Off</bootstrap-check-box>
<bootstrap-check-box checked>On</bootstrap-check-box>
</div> <br/>
<h3>Range</h3><br/>
<div class="smart material">
<bootstrap-range value=5 max=15 min=0></bootstrap-range>
</div> <br/>
<h3>Progress</h3>
<br/>
Linear progress bar
<br/><br/>
<div class="smart material">
<bootstrap-progress-bar value=25 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="info" value=50 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="success" value=75 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar style-mode="warning" value=100 max=100 min=0></bootstrap-progress-bar><br/>
</div>
<br/>
Circular progress bar
<br/>
<div class="smart material">
<bootstrap-progress-bar type="circular" value=25 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar type="circular" style-mode="info" value=50 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar type="circular" style-mode="success" value=75 max=100 min=0></bootstrap-progress-bar><br/>
<bootstrap-progress-bar type="circular" style-mode="warning" value=100 max=100 min=0></bootstrap-progress-bar><br/>
</div>
<br/>
Text Fields
<br/>
<div class="smart material group">
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<bootstrap-input outlined placeholder="First Name" required value="Mark"></bootstrap-input>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<bootstrap-input outlined placeholder="Last Name" required value="Andrews"></bootstrap-input>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<bootstrap-input outlined placeholder="Username" required value=""></bootstrap-input>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<bootstrap-input outlined placeholder="City" required value=""></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<bootstrap-input outlined placeholder="State" required value=""></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<bootstrap-input outlined placeholder="Zip" required value=""></bootstrap-input>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<br/>
<bootstrap-check-box id="invalidCheck">Agree to terms and conditions</bootstraph-check-box>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-success" type="submit">Submit form</button>
</form>
</div>
</body>
</html>