Input

<bh-input> | BharatInput

Input component provides a flexible and customizable input field with size, style, label, variant, and hint support.

Open in

Basic Usage

Preview

Open in

HTML

<bh-input placeholder="Type something"></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
  return <BharatInput placeholder="Type something" size="medium" />;
}

export default App;

Sizes

Preview

Open in

HTML

<bh-input size="xsmall" placeholder="xSmall"></bh-input>
<bh-input size="small" placeholder="Small"></bh-input>
<bh-input size="medium" placeholder="Medium"></bh-input>
<bh-input size="large" placeholder="Large"></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
    return (
      <>
          <BharatInput size="xsmall" placeholder="xSmall"></BharatInput>
          <BharatInput size="small" placeholder="Small"></BharatInput>
          <BharatInput size="medium" placeholder="Medium"></BharatInput>
          <BharatInput size="large" placeholder="Large"></BharatInput>
      </>
      );
}

export default App;

Styles: Outline & Pill

Preview

Open in

HTML

<bh-input placeholder="Outline" outline></bh-input>
<bh-input placeholder="Pill" pill></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
    return (
      <>
          <BharatInput  placeholder="Outline" outline></BharatInput>
          <BharatInput  placeholder="Pill" pill></BharatInput>
      </>
      );
}

export default App;

Label & Hint

Preview

Open in

HTML

<bh-input
  placeholder="Enter username"
  label="Username"
  labelPosition="top"
  hint="This will be public"
></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
    return <BharatInput  placeholder="Enter username" label="Username" labelPosition="top" hint="This will be public"></BharatInput>
}

export default App;

Validations

Preview

Open in

HTML

<--Email Validation--!>
<bh-input
type="email"
validationType="email"
placeholder="Enter Email"
label="Email"
labelPosition="top"
size="medium"
width="300px"
></bh-input>

<--Password Validation--!>
<bh-input
type="password"
validationType="password"
placeholder="Enter Password"
label="Password"
labelPosition="top"
size="medium"
width="300px"
></bh-input>

<--Number Validation--!>
<bh-input
type="number"
validationType="number"
placeholder="Enter Number"
label="Number"
labelPosition="top"
size="medium"
width="300px"
></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
    return (
      <>
    //Email Validation
    <BharatInput
        type="email"
        validationType="email"
        placeholder="Enter Email"
        label="Email"
        labelPosition="top"
        size="medium"
        width="300px"
    ></BharatInput>

    //Password Validation
      <BharatInput
        type="password"
        validationType="password"
        placeholder="Enter Password"
        label="Password"
        labelPosition="top"
        size="medium"
        width="300px"
      ></BharatInput>

    //Number Validation
    <BharatInput
      type="number"
      validationType="number"
      placeholder="Enter Number"
      label="Number"
      labelPosition="top"
      size="medium"
      width="300px"
    ></BharatInput>

      </>
    )
}

export default App;

Custom Example

Preview

Open in

HTML

   <bh-input
    placeholder="Custom"
    width="300px"
    height="40px"
    borderRadius="12px"
    fontSize="18px"
    border="1px solid #ccc"
    label="Custom Label"
    labelColor="#555"
    hint="Hint below"
    outline="2px solid"
    outlineColor="blueviolet"
    placeholderColor="gray"
  ></bh-input>

React

import React from 'react';
import { BharatInput } from 'bharat-ui/react/components/input';

function App() {
    return  <BharatInput
    placeholder="Custom"
    width="300px"
    height="40px"
    borderRadius="12px"
    fontSize="18px"
    border="1px solid #ccc"
    label="Custom Label"
    labelColor="#555"
    hint="Hint below"
    outline="2px solid"
    outlineColor="blueviolet"
    placeholderColor="gray"
  ></BharatInput>
}

export default App;

Properties

Property	Type	Description
placeholder	string	Input placeholder text
placeholderColor	string	Placeholder text color
placeholderSize	string	Placeholder text size
value	string	Input value
type	string	Input type (text, password, number, etc.)
size	string	Input size (xsmall, small, medium, large, xlarge)
width	string	Width of the input
height	string	Height of the input
fontSize	string	Font size of input text
background	string	Background color
border	string	Border style
pill	boolean	Makes input pill-shaped
outline	boolean	Removes background and outlines the input
label	string	Label text
labelPosition	string	top or left
labelSize	string	Font size of label
labelColor	string	Color of label
hint	string	Hint text below input
hintColor	string	Color of hint text
hintSize	string	Size of hint text
validationType	string	Validation (email,password,number)