ReactJS Multiple lines of input using Form

Question

I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is

<Form>
  <FormGroup>
    <ControlLabel>
      Label
    </ControlLabel>
    <InputGroup>
      <FormControl value='default' onChange={<some function>} />
    </InputGroup>

  </FormGroup>
</Form>

but it only rendered one line's input.

Edited: using textarea, the font seems to be very tiny.

MaartenDev · Accepted Answer · 2019-08-25 11:47:22Z

3

The following snippet fixes the described issue:

<Form.Group controlId="exampleForm.ControlTextarea1">
  <Form.Label>Example textarea</Form.Label>
  <Form.Control as="textarea" rows="3" />
</Form.Group>

edited Aug 25, 2019 at 11:47

MaartenDev

5,8315 gold badges23 silver badges36 bronze badges

answered Aug 25, 2019 at 8:58

Mohamed Abdel Nasser

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

remix23 · Accepted Answer · 2018-08-19 01:02:48Z

1

The componentClass prop of a FormControl is "input" by default, which renders a text input.

A text input is single line.

So try setting the componentClass prop of FormControl to "textarea":

<Form>
    <FormGroup>
        <ControlLabel>
            Label
        </ControlLabel>
        <InputGroup>
            <FormControl componentClass="textarea" value='default' onChange={<some function>} />
        </InputGroup>
    </FormGroup>
</Form>

answered Aug 19, 2018 at 1:02

remix23

3,1722 gold badges13 silver badges26 bronze badges

3 Comments

Mr.cysl Over a year ago

Thanks! Is there a way I could limit the height of the text box (e.g., # of lines)?

Mr.cysl Over a year ago

Also, it seems like the text is very tiny. I edited my question with a snapshot. Could you take a look?

remix23 Over a year ago

In html, textarea's number of rows is defined by the row prop: developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea FormControl should accept this prop, look into React-bootstrap's documentation or do not use react-bootstrap. The font size is determined by css as in any other text element, adjust your css or look into reat-bootstrap documentation. You also may be able to set it with a style prop: style={{ fontSize: '14px' }}

Collectives™ on Stack Overflow

ReactJS Multiple lines of input using Form

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related