Text field
A text field is an input that allows a user to write or edit text.
Default
The default form of a text field.
Help or instruction text goes here
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Textfields from '@neoKit/textfields';
const TextfieldDefault = () => {
return (
<div>
<Textfields name='default' id="input1" placeholder="enter text" type="text" />
</div>
)
}
export default TextfieldDefault;
Max characters
Text fields can be set with a maximum character limit for constraining the amount of content that can be entered. Inline validation can also be set to alert the user and clarify the request.
Max length of 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import Textfields from '@neoKit/textfields';
import HelperMessage from '@neoKit/helper-message';
const MaxCharecterTextfieldExample = () => {
return (
<div >
<Textfields
name='default'
id='input1'
placeholder='Enter text'
type='text'
maxLength={5}
/>
<HelperMessage > Max length of 5 < /HelperMessage>
</div>
)
}
export default MaxCharecterTextfieldExample;
Customization
Use the data attributes data-ds--text-field--container and data-ds--text-field--input to customize the style of the text field container and input element.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import Textfields from '@neoKit/textfields';
const CustomTextfieldExample = () => {
const list = {
padding: 20,
fontSize: 20
};
return (
<div >
<Textfields
name='default'
id='input1'
placeholder='Enter text'
type='text'
style={list}
/>
</div>
)
}
export default CustomTextfieldExample;