CODEWITHSUNDEEP
reactjsantd
Piyush Chauhan
Piyush Chauhan

Reputation: 826

How to make Input Field in antd autogrow based on length of value?

I want to use an input field from Ant design system that grows in width automatically upto a certain limit to keep the all the chararters of the input field in view all the time. Currently AntD input field has only fixed width.

Upvotes: 0

Views: 3254

Answers (1)

Ved
Ved

Reputation: 1028

Check the following example using useState, you can change the default width value of the input field as per your requirement. Once input width value reaches 100 it will stop growing (you can change the value).

import React from 'react';
import 'antd/dist/antd.css';
import { useState } from 'react';
import { Input } from 'antd';

const Demo = () => {
  const [inputwidth, setinputWidth] = useState(50);

  const onChange = (e) => {
    let length = e.target.value.length;
    if (length === 0) {
      setinputWidth(50);
    }
    if (inputwidth <= 100) {
       setinputWidth(50 + e.target.value.length * 5);
    }
  };

  return <Input onChange={onChange} style={{ width: inputwidth }} />;
};
export default Demo

Upvotes: 0

Related Questions