Text area
A text area lets users enter long form text which spans over multiple lines.
Default
The default text area.
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import TextArea from '@neoKit/textarea';
export textareaDefault () => (
<div>
<TextArea name='default' id='textarea' rows='2' cols='10' resize='auto' placeholder='enter your text' value={values} onChange={(event) => setValues(event.target.value)} maxHeight='20vh'
></TextArea>
</div>
);
Placeholder
The default values shows in text area when its empty
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaPlaceholderExample () => (
<div>
<TextArea name='default' id='textarea' rows='2' cols='10' resize='auto' placeholder='Enter your text' onChange={(event) => setValues(event.target.value)} maxHeight='20vh'></TextArea>
</div>
);
Resize
Auto
A text area that shows all user input at once. Overflow text wraps onto a new line and expands the text area.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaResizeAutoExample () => (
<div>
<TextArea
name='default'
id='textarea'
resize='auto'
placeholder='Enter your text'
onChange={(event) => setValues(event.target.value)}
maxHeight='20vh'
></TextArea>
</div>
);
Vertical resize
A text area that shows all user input at once. Overflow text wraps onto a new line and expands the text area.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaResizeVerticalExample () => (
<div>
<TextArea
name='default'
id='textarea'
resize='vertical'
placeholder='Enter your text'
onChange={(event) => setValues(event.target.value)}
maxHeight='20vh'
></TextArea>
</div>
);
Horizontal resize
A text area that shows all user input at once. Overflow text wraps onto a new line and expands the text area.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaResizeHorizontalExample () => (
<div>
<TextArea
name='default'
id='textarea'
resize='horizontal'
placeholder='Enter your text'
onChange={(event) => setValues(event.target.value)}
maxHeight='20vh'
></TextArea>
</div>
);
None
A text area that does not resize and uses a scroll bar to show overflow text.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaResizeNoneExample () => (
<div>
<TextArea
name='default'
id='textarea'
resize='none'
placeholder='Enter your text'
onChange={(event) => setValues(event.target.value)}
maxHeight='20vh'
></TextArea>
</div>
);
Smart / Default
A text area that does not resize and uses a scroll bar to show overflow text.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import TextArea from '@neoKit/textarea';
export TextareaResizeSmartExample () => (
<div>
<TextArea
name='default'
id='textarea'
resize='smart'
placeholder='Enter your text'
onChange={(event) => setValues(event.target.value)}
maxHeight='20vh'
></TextArea>
</div>
);