440 lines
16 KiB
JavaScript
440 lines
16 KiB
JavaScript
<>
|
|
{"{"}% set title = 'Input' %{"}"}
|
|
{"{"}% set filename = 'form-element-input.html' %{"}"}
|
|
{"{"}% extends 'src/layouts/master.html' %{"}"}
|
|
{"{"}% block content %{"}"}
|
|
<div className="page-heading">
|
|
<div className="page-title">
|
|
<div className="row">
|
|
<div className="col-12 col-md-6 order-md-1 order-last">
|
|
<h3>Input</h3>
|
|
<p className="text-subtitle text-muted">
|
|
Give textual form controls like input upgrade with custom styles,
|
|
sizing, focus states, and more.
|
|
</p>
|
|
</div>
|
|
<div className="col-12 col-md-6 order-md-2 order-first">
|
|
<nav
|
|
aria-label="breadcrumb"
|
|
className="breadcrumb-header float-start float-lg-end"
|
|
>
|
|
<ol className="breadcrumb">
|
|
<li className="breadcrumb-item">
|
|
<a href="index.html">Dashboard</a>
|
|
</li>
|
|
<li className="breadcrumb-item active" aria-current="page">
|
|
Input
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section className="section">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Basic Inputs</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<div className="form-group">
|
|
<label htmlFor="basicInput">Basic Input</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="basicInput"
|
|
placeholder="Enter email"
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="helpInputTop">Input text with help</label>
|
|
<small className="text-muted">
|
|
eg.<i>someone@example.com</i>
|
|
</small>
|
|
<input type="text" className="form-control" id="helpInputTop" />
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="helperText">With Helper Text</label>
|
|
<input
|
|
type="text"
|
|
id="helperText"
|
|
className="form-control"
|
|
placeholder="Name"
|
|
/>
|
|
<p>
|
|
<small className="text-muted">
|
|
Find helper text here for given textbox.
|
|
</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-group">
|
|
<label htmlFor="disabledInput">Disabled Input</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="disabledInput"
|
|
placeholder="Disabled Text"
|
|
disabled=""
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="readonlyInput">Readonly Input</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="readonlyInput"
|
|
readOnly="readonly"
|
|
defaultValue="You can't update me :P"
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="disabledInput">Static Text</label>
|
|
<p className="form-control-static" id="staticInput">
|
|
email@mazer.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Input Style start */}
|
|
<section id="input-style">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Input Styles</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p>
|
|
To set rounded border to input box, use <code>.round</code>{" "}
|
|
class and to set square border to input box, use{" "}
|
|
<code>.square</code> class alongwith
|
|
<code>.form-control</code> class.
|
|
</p>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<div className="form-group">
|
|
<label htmlFor="roundText">Rounded Input</label>
|
|
<input
|
|
type="text"
|
|
id="roundText"
|
|
className="form-control round"
|
|
placeholder="Rounded Input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<div className="form-group">
|
|
<label htmlFor="squareText">Square Input</label>
|
|
<input
|
|
type="text"
|
|
id="squareText"
|
|
className="form-control square"
|
|
placeholder="Square Input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Input Style end */}
|
|
{/* Horizontal Input start */}
|
|
<section id="horizontal-input">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Horizontal Input</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p>
|
|
To make label in center of form-control, use{" "}
|
|
<code>.col-form-label</code> class with
|
|
<code><label></code> element. This is default
|
|
bootstrap class.
|
|
</p>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-group row align-items-center">
|
|
<div className="col-lg-2 col-3">
|
|
<label className="col-form-label" htmlFor="first-name">
|
|
First Name
|
|
</label>
|
|
</div>
|
|
<div className="col-lg-10 col-9">
|
|
<input
|
|
type="text"
|
|
id="first-name"
|
|
className="form-control"
|
|
name="fname"
|
|
placeholder="First Name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-group row align-items-center">
|
|
<div className="col-lg-2 col-3">
|
|
<label className="col-form-label" htmlFor="last-name">
|
|
Last Name
|
|
</label>
|
|
</div>
|
|
<div className="col-lg-10 col-9">
|
|
<input
|
|
type="text"
|
|
id="last-name"
|
|
className="form-control"
|
|
name="fname"
|
|
placeholder="Last Name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Horizontal Input end */}
|
|
{/* Basic File Browser start */}
|
|
<section id="input-file-browser">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">File Input</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-lg-6 col-md-12">
|
|
<div className="mb-3">
|
|
<label htmlFor="formFile" className="form-label">
|
|
Default file input example
|
|
</label>
|
|
<input className="form-control" type="file" id="formFile" />
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="formFileMultiple" className="form-label">
|
|
Multiple files input example
|
|
</label>
|
|
<input
|
|
className="form-control"
|
|
type="file"
|
|
id="formFileMultiple"
|
|
multiple=""
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="formFileDisabled" className="form-label">
|
|
Disabled file input example
|
|
</label>
|
|
<input
|
|
className="form-control"
|
|
type="file"
|
|
id="formFileDisabled"
|
|
disabled=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-12">
|
|
<div className="mb-3">
|
|
<label htmlFor="formFileSm" className="form-label">
|
|
Small file input example
|
|
</label>
|
|
<input
|
|
className="form-control form-control-sm"
|
|
id="formFileSm"
|
|
type="file"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="formFileLg" className="form-label">
|
|
Large file input example
|
|
</label>
|
|
<input
|
|
className="form-control form-control-lg"
|
|
id="formFileLg"
|
|
type="file"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Basic File Browser end */}
|
|
{/* Input with Icons start */}
|
|
<section id="input-with-icons">
|
|
<div className="row match-height">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Input with Icons</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p>
|
|
For Input Box with icon use <code>.position-relative</code>{" "}
|
|
class with
|
|
<code>.form-group</code> and use class{" "}
|
|
<code>.has-icon-left</code> or
|
|
<code>.has-icon-right</code> class for icon on left side.
|
|
</p>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<h6>Left Icon</h6>
|
|
<div className="form-group position-relative has-icon-left">
|
|
<input
|
|
type="text"
|
|
className="form-control is-invalid"
|
|
placeholder="Input with icon left"
|
|
/>
|
|
<div className="form-control-icon">
|
|
<i className="bi bi-person" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<h6>Right Icon</h6>
|
|
<div className="form-group position-relative has-icon-right">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="Icon Right, Default Input"
|
|
/>
|
|
<div className="form-control-icon">
|
|
<i className="bi bi-bookmarks" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Input with Icons end */}
|
|
{/* Input Sizing start */}
|
|
<section id="input-sizing">
|
|
<div className="row match-height">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Control Sizing Option</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p>
|
|
For different sizes of Input, Use classes like{" "}
|
|
<code>.form-control-lg</code> &
|
|
<code>.form-control-sm</code> for Large, Small input box.
|
|
</p>
|
|
</div>
|
|
<div className="col-sm-4">
|
|
<h6>Large</h6>
|
|
<input
|
|
className="form-control form-control-lg"
|
|
type="text"
|
|
placeholder="Large Input"
|
|
/>
|
|
</div>
|
|
<div className="col-sm-4">
|
|
<h6>Default</h6>
|
|
<input
|
|
className="form-control"
|
|
type="text"
|
|
placeholder="Default Input"
|
|
/>
|
|
</div>
|
|
<div className="col-sm-4">
|
|
<h6>Small</h6>
|
|
<input
|
|
className="form-control form-control-sm"
|
|
type="text"
|
|
placeholder="Small Input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Input Sizing end */}
|
|
{/* validations start */}
|
|
<section id="input-validation">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h4 className="card-title">Input Validation States</h4>
|
|
</div>
|
|
<div className="card-body">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p>
|
|
You can indicate invalid and valid form fields with{" "}
|
|
<code>.is-invalid</code> and
|
|
<code>.is-valid</code>. Note that{" "}
|
|
<code>.invalid-feedback</code> is also supported with these
|
|
classes.
|
|
</p>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<label htmlFor="valid-state">Valid State</label>
|
|
<input
|
|
type="text"
|
|
className="form-control is-valid"
|
|
id="valid-state"
|
|
placeholder="Valid"
|
|
defaultValue="Valid"
|
|
required=""
|
|
/>
|
|
<div className="valid-feedback">
|
|
<i className="bx bx-radio-circle" />
|
|
This is valid state.
|
|
</div>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<label htmlFor="invalid-state">Invalid State</label>
|
|
<input
|
|
type="text"
|
|
className="form-control is-invalid"
|
|
id="invalid-state"
|
|
placeholder="Invalid"
|
|
defaultValue="Invalid"
|
|
required=""
|
|
/>
|
|
<div className="invalid-feedback">
|
|
<i className="bx bx-radio-circle" />
|
|
This is invalid state.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* validations end */}
|
|
</div>
|
|
{"{"}% endblock %{"}"}
|
|
</>
|