Pixelstrap - Admin Document

Forms

Validation form Preview link

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

<Form class="needs-validation" novalidate>
  <Row class="g-3">
    <Col md="4">
        <Label for="validationCustom01">First name</Label>
        <Input class="form-control" id="validationCustom01" type="text" value="Mark" required />
        <div class="valid-feedback">Looks good!</div>
    </Col>
    <Col md="4">
        <Label for="validationCustom02">Last name</Label>
        <Input id="validationCustom02" type="text" value="Otto" required >
        <div class="valid-feedback">Looks good!</div>
    </Col>
    <Col md="4" class="mb-3">
      <Label for="validationCustomUsername">Username</Label>
      <InputGroup>
        <InputGroupText id="inputGroupPrepend">@</InputGroupText>
        <Input id="validationCustomUsername" type="text" placeholder="Username" aria-describedby="inputGroupPrepend" required />
        <div class="invalid-feedback">Please choose a username.</div>
      </InputGroup>
    </Col>
  </Row>
  <Row class="g-3">
    <Col md="6">
      <Label for="validationCustom03">City</Label>
      <Input id="validationCustom03" type="text" placeholder="City" required />
      <div class="invalid-feedback">Please provide a valid city.</div>
    </Col>
    <Col md="3">
      <Label for="validationCustom04">State</Label>
      <Input type="select" class="form-select" id="validationCustom04" required>
        <option selected="" disabled value="">Choose...</option>
        <option>...</option>
      </Input>
      <div class="invalid-feedback">Please select a valid state.</div>
    </Col>
    <Col md="3" class="mb-3">
      <Label for="validationCustom05">Zip</Label>
      <Input id="validationCustom05" type="text" placeholder="Zip" required />
      <div class="invalid-feedback">Please provide a valid zip.</div>
    </Col>
  </Row>
  <FormGroup>
    <div class="form-check">
      <div class="checkbox p-0">
        <input class="form-check-input" id="invalidCheck" type="checkbox" required="" data-bs-original-title="" title="">
        <Label class="form-check-label" for="invalidCheck">Agree to terms and conditions</Label>
      </div>
      <div class="invalid-feedback">You must agree before submitting.</div>
    </div>
  </FormGroup>
 <Button color="primary" type="submit">Submit form</Button>
</Form>

Base input Preview link

<Form class="theme-form">
  <Card class="card-body p-0">
    <Row>
      <Col>
        <FormGroup>
          <Label for="exampleFormControlInput1">Email address</Label>
          <Input id="exampleFormControlInput1" type="email" placeholder="name@example.com">
        </FormGroup>
      </Col>
    </Row>
  </Card>
</Form>

Checkbox & Radio Preview link

Option 1

Disabled

Checked

Default

Disabled

Checked

<Row>
  <Col lg="3" md="6" class="custom-radio-ml">
    <div class="form-check radio radio-primary">
      <input class="form-check-input" id="radio1" type="radio" name="radio1" value="option1" data-bs-original-title="" title="">
      <Label class="form-check-label" for="radio1">Option<span class="digits"> 1</span></Label>
    </div>
    <div class="form-check radio radio-primary">
      <input class="form-check-input" id="radio3" type="radio" name="radio1" value="option1" disabled>
      <Label class="form-check-label" for="radio3">Disabled</Label>
    </div>
    <div class="form-check radio radio-primary">
      <input class="form-check-input" id="radio4" type="radio" name="radio1" value="option1" checked>
      <Label class="form-check-label" for="radio4">Checked</Label>
    </div>
  </Col>
  <Col md="6" lg="3">
    <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox1" type="checkbox">
      <Label class="form-check-label my-0" for="checkbox1">Default</Label>
    </div>
    <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox2" type="checkbox" disabled>
      <Label class="form-check-label my-0" for="checkbox2">Disabled</Label>
    </div>
    <div class="form-check checkbox mb-0">
      <input class="form-check-input" id="checkbox3" type="checkbox" checked>
      <Label class="form-check-label my-0" for="checkbox3">Checked</Label>
    </div>
  </Col>
</Row>

Input group Preview link

<Form>
  <div class="mb-3 m-form__group">
    <div class="form-label">Left Addon</div>
      <InputGroup>
        <span class="input-group-text">@</span>
        <Input ="text" placeholder="Email" />
      </div>
    </div>
  </div>
</Form>

Datepicker Offical link Preview link

<div class="date-picker">
  <Form class="theme-form">
    <Row class="mb-3 g-3">
      <Label class="col-sm-3 col-form-label text-sm-end">Default</Label>
      <Col xl="5" sm="9">
        <InputGroup>
          <Input class="datepicker-here digits" type="text" data-language="en" data-bs-original-title="" title="" />
        </InputGroup>
      </Col>
    </Row>
  </Form>
</div>

Switch Preview link

<Label class="switch">
  <Input type="checkbox" checked />
  <span class="switch-state"></span>
</Label>
<Label class="switch">
  <Input type="checkbox">
  <span class="switch-state"></span>
</Label>

Touchspin Offical link Preview link

<fieldset>
  <div class="input-group">
    <Input class="touchspin" type="text" value="40" />
  </div>
</fieldset>

Select2 Offical link Preview link

Default Placeholder

<div class="col-form-label">Default Placeholder</div>
  <select class="js-example-placeholder-multiple col-sm-12" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="WY">Coming</option>
    <option value="WY">Hanry Die</option>
    <option value="WY">John Doe</option>
  </select>
</div>

To use select2 you have to add the following script files

<!-- Touchspin JS -->
<script src="assets/js/select2/select2.full.min.js"></script>
<script src="assets/js/select2/select2-custom.js"></script>

You have to add the following style css file for the select2 design

<!-- Select 2 CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/vendors/select2.css">

Typeahead Offical link Preview link


  <Form class="theme-form">
    <FormGroup>
      <Typeahead placeholder="States of USA" {data} extract={(typeItem) => typeItem.state} on:select={({ detail }) => events = [...events, detail]} on:clear={() => events = [...events, "clear"]} />
    </FormGroup>
  </Form>

To use typeahead you have to add the following script files

npm i -D svelte-typeahead

Form wizard Preview link

First Name

Last Name

Contact No.

Email address

Password

Confirm Password

Birthday:

Age

Have Passport

Country

State

City

<Form class="form-wizard" id="regForm" action="#" method="POST">
  <div class="tab">
    <FormGroup>
      <Label for="name">First Name</Label>
      <Input id="name" type="text" placeholder="Johan" required />
    </FormGroup>
    <FormGroup>
      <Label for="lname">Last Name</Label>
      <Input id="lname" type="text" placeholder="Deo" />
    </FormGroup>
    <FormGroup>
      <Label for="contact">Contact No.</Label>
      <Input id="contact" type="number" placeholder="123456789" />
    </FormGroup>
  </div>
  <div class="tab">
    <FormGroup class="m-t-15">
      <Label for="exampleFormControlInput1">Email address</Label>
      <Input id="exampleFormControlInput1" type="email" placeholder="name@example.com" />
    </FormGroup>
    <FormGroup>
      <Label for="exampleInputPassword1">Password</Label>
      <Input id="exampleInputPassword1" type="password" placeholder="Password" />
    </FormGroup>
    <FormGroup>
      <Label for="exampleInputPassword1">Confirm Password</Label>
      <Input id="exampleInputcPassword1" type="password" placeholder="Enter again" />
    </FormGroup>
  </div>
  <div class="tab">
    <FormGroup>
      <Label for="exampleFormControlInput1">Birthday:</Label>
      <Input type="date">
    </FormGroup>
    <FormGroup>
      <Label class="control-label">Age</Label>
      <Input placeholder="Age" type="text" />
    </FormGroup>
    <FormGroup>
      <Label class="control-label">Have Passport</Label>
      <Input placeholder="Yes/No" type="text" />
    </FormGroup>
  </div>
  <div class="tab">
    <FormGroup>
      <Label class="control-label">Country</Label>
      <Input class="mt-1" type="text" placeholder="Country" required />
    </FormGroup>
    <FormGroup>
      <Label class="control-label">State</Label>
      <Input class="mt-1" type="text" placeholder="State" required />
    </FormGroup>
    <FormGroup>
      <Label class="control-label">City</Label>
      <Input class="mt-1" type="text" placeholder="City" required />
    </FormGroup>
  </div>
  <div>
    <div class="text-end btn-mb">
      <Button color="secondary" id="prevBtn">Previous</Button>
      <Button color="primary" id="nextBtn" >Next</Button>
    </div>
  </div>
</Form>