Skip to main content

TextInput

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

img

Usage​

import React from 'react'
import { TextInput } from 'qdm-component-library'

function App() {
  return <TextInput />
}
export default App

Reference​

Props​

here all the list of Props you can use for TextInput Component

label​

props for adding the TextInput text string by default it will be in TextInput

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return <TextInput label="Hello World" />
}
export default App

error​

If true, the label will be displayed in an error state.

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return <TextInput label="Hello World" error={true} />
}
export default App

helperText​

It shows the error message in Text Field .

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return <TextInput label="Hello World" error={true} helperText="I'm a error" />
}
export default App

helperTextType​

In Qdm Component we provide 3 types of helperTextType.

  • error
  • warring
  • success
import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return (
    <TextInput
      label="Hello World"
      error={true}
      helperText="I'm a error"
      helperTextType="error"
    />
  )
}
export default App

onChange​

The onChange attribute fires the moment when the value of the element is changed.

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return (
    <TextInput
      label="Hello World"
      onChange={(evt) => {
        fun(evt)
      }}
    />
  )
}
export default App

Icon​

You can set any Icon by using icon variable.

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return <TextInput label="Hello World" Icon={'Your Icon'} />
}
export default App

allowClear​

If you need clear option you can use allowClear when click this Icon, its an boolean.

import React from 'react'
import { TextInput } from 'qdm-component-library'
function App() {
  return <TextInput label="Hello World" Icon={'Your Icon'} allowClear={true} />
}
export default App

id​

props to uniquely identify string

className​

props for adding classname string

name​

props for addding name attribute string

onChangeClear​

If you want to clear the data in Text Field, To call setState in onChangevalue.

width​

The width attribute specifies the width of the Text Field element.

helperTextStyle​

Its an style attribute specifies helperTextStyle, elements type Object

inLineStyles​

props give addition props to the input element type Object

if true it shows search icon boolean

borderColor​

props for changing border color of the input string

padding​

props for changing padding of the input number

margin​

props for changing margin of the input number

elevation​

props for box shadow for button group '0'|'1' |'2' |'3' |'4'

value​

props for the value of the input string

disabled​

if true it act as readonly boolean

defaultValue​

props for providing the default value for the input string

autoFocus​

if true it will focus in while initail render boolean

maxLength​

this props will help to limit the value of the input number

variant​

Three types of variant 1.standard for only bottom bordered input 2.outlined for fully bordered input 3.none for border none 'standard'|'outlined'|'none