Components
Inputs
Page Elements
Filters
Feedback
Properties
Input Fields are offered with the following property variables:
| Prop | Type | Default | Notes |
|---|---|---|---|
size | string | regular | Defines the size. Can be small, regular or large |
labelPosition | string | top | Can be top or left |
placeholder | string | N/A | Defines hint text. Not required |
name | string | N/A | Required prop |
label | string | N/A | Required prop. Defines field label text. |
errorMessage | string | N/A | Will introduce alert style and message when prop is supplied |
disabled | boolean | false | Will disable user input |
tag | string | input | Changes the underlying HTML element. Can be input or textarea |
labelStyle | object | N/A | Style object for the label |
24px - Height
Left Label - Default
Left Label - Disabled
Top Label - Default
Top Label - Disabled
Code
<div>
<undefined
errorMessage='Error text'
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
size='small'
/>
<undefined
disabled
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
size='small'
/>
<undefined
errorMessage='Error text'
label='Label'
name='test1'
placeholder='Hint Text'
size='small'
/>
<undefined
disabled
label='Label'
name='test1'
placeholder='Hint Text'
size='small'
/>
</div>36px - Height
Left Label - Default
Left Label - Disabled
Top Label - Default
Top Label - Disabled
Code
<div>
<undefined
errorMessage='Error text'
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
/>
<undefined
disabled
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
/>
<undefined
errorMessage='Error text'
label='Label'
name='test1'
placeholder='Hint Text'
/>
<undefined
disabled
label='Label'
name='test1'
placeholder='Hint Text'
/>
</div>44px - Height
Left Label - Default
Left Label - Disabled
Top Label - Error
Top Label - Disabled
Code
<div>
<undefined
errorMessage='Error text'
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
size='large'
/>
<undefined
disabled
label='Label'
labelPosition='left'
name='test1'
placeholder='Hint Text'
size='large'
/>
<undefined
errorMessage='Error text'
label='Label'
name='test1'
placeholder='Hint Text'
size='large'
/>
<undefined
disabled
label='Label'
name='test1'
placeholder='Hint Text'
size='large'
/>
</div>
