import React from 'react'; import { InputExample, InputSizing, FileInput, InputGroup, InputGroupSizing, MultipleInputs, ButtonsCheckboxesRadiosGroup, ButtonsWithDropdowns, CustomForms } from './BasicElementCode'; import UiContent from "../../../Components/Common/UiContent"; //import Components import BreadCrumb from '../../../Components/Common/BreadCrumb'; import { Card, Col, Container, Row, Dropdown, Form, FloatingLabel } from 'react-bootstrap'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; const BasicElements = () => { return (
Basic Input
Input with Label
Input with Placeholder
Input with Value
Readonly Plain Text Input
Readonly Input
Disabled Input
Input with Icon
Input with Icon Right
Input Date
Input Time
Input Password
Example Textarea
Form Text
Must be 8-20 characters long.
Color Picker
Input Border Style
Datalist example
Rounded Input

Use form-control-lg class to set large size input and Use form-control-sm class to set small size input. No class is needed for default size input.
Default File Input Example

Use input attribute with type="file" tag for default file input.

Multiple Files Input Example

Use multiple attribute within the input attribute to select multiple files.

Disabled File Input Example

Use disabled attribute within the input attribute to disable the file input.
File Input Sizing
Small Size File Input Example

Use form-control-sm class within the form-control class to set a small size file input.

Default Size File Input Example

Use form-control class and type="file" attribute within the input attribute to set a default size file input.

Large Size File Input Example

Use form-control-lg class within the form-control class to set a large size file input.
Basic example

Use input-group class to div element which contains input attribute to wrap a default input in the group.

@
@example.com
$ .00
@
With textarea
Your vanity URL
https://example.com/users/
Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with flex-nowrap class.

@

Use input-group-sm class to set a small size input group and input-group-lg class to input-group class to set a large size input group respectively. no such class is required for a default size input group.

Small
Default
Large

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

First and last name
$ 0.00
$ 0.00

Use any checkbox, radio, or button option within an input group’s addon instead of text. We recommend adding mt-0 class to the form-check-input when there’s no visible text next to the input.

You can use a button with the dropdown toggle to set the file input group.

Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
    •
  • Action
  • Another action
  • Something else here
  • Separated link
    •
  • Action before
  • Another action before
  • Something else here
  • Separated link
    •
  • Action
  • Another action
  • Something else here
  • Separated link
    •

    Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

    Select
    Options
    Options
    File Input
    Upload
    Upload
    ); } BasicElements.layout = (page: any) => export default BasicElements;