Skip to content

Latest commit

 

History

History
215 lines (183 loc) · 10.5 KB

input.mdx

File metadata and controls

215 lines (183 loc) · 10.5 KB
Raw

title: 'Input' metaTitle: 'Input Component for React Bootstrap 5' metaDescription: 'React Bootstrap 5 Input is a specific field that receives data from the user. ' githubUrl: "https://github.com/Devwares-Team/DOCS-Contrast/blob/master/content/contrast/react/components/input.mdx" ---import React from 'react'; import { Link } from 'gatsby';

React Bootstrap 5 Input

React Bootstrap 5 Input is a specific field that receives data from the user. It's primarily used in a variety of web-based forms.

Importing the React Bootstrap 5 Input Component

You begin by importing CDBInput into your project to use the Contrast React Bootstrap 5 Input component.

import { CDBInput } from 'cdbreact';

Default Input Types

Here are examples of input types supported by CDBInput

import React from 'react';
import { CDBInput, CDBBox, CDBContainer } from 'cdbreact';

const Input = () => {
  return (
    <CDBContainer>
      <CDBInput type="text" placeholder="Text" color="primary" />
      <CDBInput type="number" placeholder="Numbers" />
      <CDBInput type="email" placeholder="Email" />
      <CDBInput type="password" placeholder="Password" />
      <CDBInput type="date" placeholder="Date" />
      <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
        <CDBInput type="checkbox" id="checkbox" />
        <span style={{ marginLeft: '5px' }}>Checkbox</span>
      </CDBBox>
      <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
        <CDBInput type="radio" id="radio" />
        <span style={{ marginLeft: '5px' }}>Radio</span>
      </CDBBox>
      <CDBInput type="textarea" placeholder="TextArea" />
    </CDBContainer>
  );
};
export default Input;

Color Variations

You can use the color prop to define the color and backgroud type for the input. The default color property is dark

import React from 'react';
import { CDBInput, CDBContainer, CDBBox } from 'cdbreact';

const Input = () => {
  return (
    <CDBContainer>
      <CDBInput placeholder="Primary" background color="primary" />
      <CDBInput placeholder="Secondary" background color="secondary" />
      <CDBInput placeholder="Success" background color="success" />
      <CDBInput placeholder="Danger" background color="danger" />
      <CDBInput placeholder="Warning" background color="warning" />
      <CDBInput placeholder="Info" background color="info" />
      <CDBInput placeholder="Dark" background color="dark" />
      <CDBBox style={{ width: '100%', flexWrap: 'wrap' }}>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="checkbox" id="checkboxPrimary" checked color="primary" />
            <span style={{ marginLeft: '5px' }}>Primary</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="radio" id="radioPrimary" color="primary" />
            <span style={{ marginLeft: '5px' }}>Primary</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="checkbox" id="checkboxSecondary" checked color="secondary" />
            <span style={{ marginLeft: '5px' }}>Secondary</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="radio" id="radioSecondary" color="secondary" />
            <span style={{ marginLeft: '5px' }}>Secondary</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="checkbox" id="checkboxDanger" checked color="danger" />
            <span style={{ marginLeft: '5px' }}>Danger</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="radio" id="radioDanger" color="danger" />
            <span style={{ marginLeft: '5px' }}>Danger</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="checkbox" id="checkboxSuccess" checked color="success" />
            <span style={{ marginLeft: '5px' }}>Success</span>
          </CDBBox>
        </CDBContainer>
        <CDBContainer>
          <CDBBox display="flex" alignItems="center" style={{ margin: '10px 0' }}>
            <CDBInput type="radio" id="radioSuccess" color="success" />
            <span style={{ marginLeft: '5px' }}>Success</span>
          </CDBBox>
        </CDBContainer>
      </CDBBox>
    </CDBContainer>
  );
};
export default Input;

Input Sizing

import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';

const Input = () => {
  return (
    <CDBContainer>
      <CDBInput fontSize={16} size="lg" placeholder="Primary" />
      <CDBInput placeholder="Primary" />
      <CDBInput fontSize={12} size="sm" placeholder="Primary" />
    </CDBContainer>
  );
};
export default Input;

Input with icons

import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';

const Input = () => {
  return (
    <CDBContainer>
      <CDBInput placeholder="Username" icon={<i className="fa fa-profile text-dark"></i>} />
      <CDBInput placeholder="email" type="email" icon={<i className="fa fa-email text-dark"></i>} />
    </CDBContainer>
  );
};
export default Input;

Disabled Inputs

import React from 'react';
import { CDBInput, CDBContainer } from 'cdbreact';

const Input = () => {
  return (
    <CDBContainer>
      <CDBInput disabled type="email" placeholder="Your E-mail" />
    </CDBContainer>
  );
};
export default Input;

Contrast React Bootstrap 5 Input Props

This section will expand on the props available with the React Bootstrap 5 Input component. You'll learn what these props do, how to utilize them, and what their default values are.

Other prop options for the CDBInput component are listed in the table below

Name Type Default Description Example
className String Adds custom classes <CDBInput className="myClass" ... />
placeholder String Sets the placeholder for the Input <CDBInput placeholder="Placeholder" ... />
value Number, Boolean or String The value of the input element (use with the controlled input) <CDBInput value="I am controlled" onChange={this.handleChange} ... />
valueDefault Number or String The default value of the input (use with the uncontrolled input) <CDBInput valueDefault="I am uncontrolled" ... />
id String Required! Set the id of the input element <CDBInput id="myId" ... />
size String Changes size of the component; available lg and sm <CDBInput size="lg" ... />
type String text The type of the input element <CDBInput type="checkbox" ... />
icon node Adds font awesome icon <CDBInput icon={<i className="fa fa-user"></i>} ... />
disabled Boolean false Disables Input component <CDBInput disabled .../>
background Boolead false Enables Background of Input <CDBInput background .../>
color String dark Defines Background and color of Input <CDBInput color="primary" .../>
focused Boolean false Defines focused state of Input <CDBInput focused .../>
fontSize Number 14 Defines defualt font size of Input <CDBInput fontSize={14} .../>
getValue Function Retrieves value of Input onchange <CDBInput getValue={()=>()} .../>
inputClassName String Adds custom classes to input <CDBInput iconClassName="myIconClass" ... />
labelClassName String Adds custom classes to label <CDBInput labelClassName="myLabelClass" ... />
onBlur Function to be called when Input is blurred <CDBInput onBlur={()=>()} .../>
onChanged Function to be called when Input value is changed <CDBInput onChange={()=>()} .../>
onFocus Function to be called when Input is focused <CDBInput onFocus={()=>()} .../>
onInput Function <CDBInput onInput={()=>()} .../>