box-ui-elements-mlh
Version:
120 lines (109 loc) • 2.45 kB
Markdown
### Examples
**Email**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
label="Email Address"
name="email"
placeholder="user@example.com"
type="email"
value="aaron@example.com"
/>
```
**Url**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
label="Url"
name="url"
placeholder="https://box.com"
type="url"
/>
```
**Must Say Box**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
function customFn(value) {
if (value !== 'box') {
return {
code: 'notbox',
message: 'value is not box',
};
}
return null;
};
<TextInput
label="Must Say Box"
name="customValidationFunc"
placeholder="Not Box"
type="text"
validation={ customFn }
/>
```
**Minimum length**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
minLength={ 3 }
name="minlenCheck"
label="Minimum length"
placeholder="Three or more"
type="text"
/>
```
**Maximum length**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
maxLength={ 5 }
name="maxlenCheck"
label="Maximum length"
placeholder="Five or less"
type="text"
/>
```
**Tooltip on hover**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
name="tooltipCheck"
label="Tooltip on hover"
placeholder="Hover over the label"
type="text"
labelTooltip="I am the tooltip"
/>
```
**Label Hidden**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
label="This label text should be hidden"
name="hidden label"
placeholder="Hidden (but accessible) label text"
type="text"
hideLabel
/>
```
**Disabled**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
name="disabled"
isDisabled
label="Disabled"
placeholder="Disabled input"
type="text"
/>
```
**Loading**
```
const TextInput = require('box-ui-elements/es/components/form-elements/text-input').default;
<TextInput
name="loading"
isDisabled
isLoading
label="Loading"
placeholder="loading..."
type="text"
/>
```