Skip to main content

TextField

An input text field is a specific type of text field used in web development to collect user input through a web form. It is a GUI element that allows users to enter and edit text, and is an essential component of web forms used for a variety of purposes such as user registration, login, contact forms, surveys, and more.

Default Text Field​

To call technotic's text field:

import { Input } from 'technotic';

<Input.TextField/>

Text Field Customization​

Size​

There are 3 sizes of text field :

  • Small
<Input.TextField
    inputSize={'small'}
/>
  • Medium (default)
<Input.TextField
    inputSize={'medium'}
/>
  • Large
<Input.TextField
    inputSize={'large'}
/>

Font Size​

The font size of the text in the field can be adjusted for readability. Our default font size is 20px


<Input.TextField
    fontSize={'25px'}
/>

Label & Placeholder Text​

Label and placeholder text can be customized according to what information should be entered in a text field.


<Input.TextField
    textLabel={'Name'}
    textPlaceholder={'Please Input Your Name'}
/>

Border Radius​

Our default border radius is 15px, but you can modify it


<Input.TextField
    borderRadius={'30px'}
/>

Error Message and Validation​

  • Validation rules can be set to ensure that the text entered in the field meets specific criteria.
  • Error messages can be displayed when the user enters invalid input to provide feedback and guidance.


import React, { useState } from 'react'

function App() {

  const [text, setText] = useState();
  const [error,setError]=useState("")

  const handleSubmit=(e)=>{
    e.preventDefault();
    if(typeof text == 'undefined'||text == ''){
        setError("error");
    }else{
      setError("success");
    }
  }
  return (
    <form onSubmit={handleSubmit}>
        <Input.TextField
        status={error}
        value = {text}
        onChange={(e) => {setText(e.target.value)}}
        />
        {error&&typeof text == 'undefined'||text == ''? <small style={{color:"red"}}>Last Name can't be Empty</small>:""}
        <br></br>
        <button>
          Submit
        </button>
    </form>
  );
}

Text Field with Button​

Consists of a text input field for users to enter text and a button that performs an action based on the input provided in many styles.

  • Left Icon Button

import contact from './img/contact.png';

<form>
    <Input.TextField
        iconLeft = { contact }
        backgroundButtonColor ={'#22539F'}
    />
</form>
  • Right Icon Button

import search from './img/search.png';

<form>
    <Input.TextField
        iconButton = { search }
        backgroundButtonColor ={'#22539F'}
        iconHeight={'20px'}
    />
</form>
  • Right Text Button

<form>
    <Input.TextField
        textButton = {'search'}
        backgroundButtonColor = {'#22539F'}
    />
</form>
  • Right Icon Button with Customized Border Radius

import search from './img/search.png';

<form>
    <Input.TextField
        iconButton = {search}
        backgroundButtonColor ={'#22539F'}
        iconHeight={'20px'}
        borderRadius = {'30px'}
        borderRadiusButton = {'0px 28px 28px 0px'}
    />
</form>