Input

Input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms. You can use material design version or default bootstrap style.

Default Input Types

Default Input example.

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
export const Input = () => {
  return (
    <CDBContainer>
          <CDBInput label="Username" />
          <CDBInput hint="Your e-mail" type="email" />
          <CDBInput type="number" />
          <CDBInput material type="text" />
          <CDBInput background type="text" />
          <CDBInput type="checkbox" />
          <CDBInput className="mt-5" type="textarea" />
    </CDBContainer>
  );
};
export default Input;

Input Sizing

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
export const Input = () => {
  return (
    <CDBContainer>
          <CDBInput label="Your e-mail" type="email" size="sm" />
          <CDBInput type="number" label="Your Number" size="lg" />
    </CDBContainer>
  );
};
export default Input;

Input with icons

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput label="Username" type="text" icon="user"/>
          <CDBInput label="Password" type="password" icon="bell"/>
    </CDBContainer>
  );
};
export default Input;

Input with MD

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput material label="Your e-mail" type="email" />
          <CDBInput material type="number" label="Your Number" />
    </CDBContainer>
  );
};
export default Input;

Placeholder

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput hint="Your e-mail" type="email" />
          <CDBInput type="number" hint="Your Number" />
    </CDBContainer>
  );
};
export default Input;

Disabled Inputs

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput hint="Your e-mail" type="email" disabled />
          <CDBInput hint="Your Number" type="number" disabled />
    </CDBContainer>
  );
};
export default Input;

Textarea

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput label="Your name" type="textarea" />
          <CDBInput
            label="Your story"
            type="textarea"
            material
            rows={5}
            cols={10}
          />
    </CDBContainer>
  );
};
export default Input;

Background

import React from "react";
import { CDBInput, CDBContainer } from "cdbreact";
const Input = () => {
  return (
    <CDBContainer>
          <CDBInput hint="Your e-mail" type="email" background />
          <CDBInput type="number" hint="Your Number" background />
    </CDBContainer>
  );
};
export default Input;

API

In this section you will find advanced information about the Input component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Input Import Statement

You need to import the Contrast Input component first before using it.

import { CDBInput } from "cdbreact";

API Reference: Contrast Input Properties

The table below shows the configuration options of the CDBInput component.