1.2.0-alpha.2683dfca • Published 8 years ago

@crave/farmblocks-input-text v1.2.0-alpha.2683dfca

Weekly downloads
17
License
MIT
Repository
github
Last release
8 years ago

Farmblocks Text Input

A form field to input simple text

Installation

npm install @crave/farmblocks-input-text

Usage

import React, { Component } from "react";
import { render } from "react-dom";
import TextInput from "@crave/farmblocks-input-text";

const root = document.createElement("div");
document.body.appendChild(root);

render(
  <div>
    <TextInput label="Text Field" placeholder="enter a text..." />
    <TextInput disabled label="Disabled Field" placeholder="disabled field" />
    <TextInput
      label="Number Field"
      type="number"
      placeholder="enter a number"
    />
  </div>,
  root
);

See the stories source code for more usage examples.

Properties

The core of the Text Input component is an html input element of default type type="text". So the APIs are very similar.

For example, value, placeholder, disabled, maxLength, onChange and others not listed here, should work as expected, you can assume that the property will be forwarded to the core html input element.

Extra properties

In addition to the normal input properties, there are some other optional properties that provides enhanced functionality:

propertytypedescription
labelstringa text to be used as label for the field
validationMessagesarray of stringstext messages to display if the invalid property is present / true if passed will style the field as a field that needs attention / corrections
errorIconSrcstringthe url for a custom icon to be displayed before all error messages
tooltipTextstringthe tooltip text is displayed on mouseover for the disabled field, use this property if you need to change the default text

Built-in constraint validation

Modern browsers have some built-in validation checks that you can use, such as marking that a field cannot be empty with the required property for example. This can be useful to prevent a trip to your server-side when you know before hand that a field cannot be empty.

Other html input attributes that have built-in browser validation checks are the type attribute, like type="email", type="URL", type="number", etc... and even regular expression patterns with the pattern attribute. See this MDN page.

If used, and supported by the browser, The Text Input component will override the default native browser balloon and display the validation message provided by the browser using the farmblocks styling.

We recomend however that you do back-end validation regardless of the browser constraint support, and then use the validationMessages propertiy to present the returned field errors of your server-side validations.

License

MIT

5.1.14

4 years ago

5.1.13

4 years ago

5.1.12

4 years ago

5.1.9

4 years ago

5.1.8

5 years ago

5.1.7

5 years ago

5.1.6

5 years ago

5.1.5

5 years ago

5.1.4

5 years ago

5.1.3

5 years ago

5.1.2

5 years ago

5.1.1

5 years ago

5.1.0

5 years ago

5.0.0

6 years ago

4.0.0

6 years ago

3.9.1

6 years ago

3.9.0

6 years ago

3.8.17

6 years ago

3.8.16

6 years ago

3.8.15

6 years ago

3.8.14

6 years ago

3.8.13

6 years ago

3.8.12

6 years ago

3.8.11

6 years ago

3.8.10

6 years ago

3.8.9

6 years ago

3.8.8

6 years ago

3.8.7

6 years ago

3.8.6

6 years ago

3.8.5

6 years ago

3.8.4

6 years ago

3.8.3

6 years ago

3.8.2

6 years ago

3.8.1

6 years ago

3.8.0

6 years ago

3.7.0

6 years ago

3.6.25

6 years ago

3.6.24

6 years ago

3.6.23

6 years ago

3.6.22

6 years ago

3.6.21

6 years ago

3.6.20

6 years ago

3.6.19

6 years ago

3.6.18

6 years ago

3.6.17

6 years ago

3.6.16

6 years ago

3.6.15

6 years ago

3.6.14

6 years ago

3.6.13

6 years ago

3.6.12

6 years ago

3.6.11

7 years ago

3.6.10

7 years ago

3.6.9

7 years ago

3.6.8

7 years ago

3.6.7

7 years ago

3.6.6

7 years ago

3.6.5

7 years ago

3.6.4

7 years ago

3.6.3

7 years ago

3.6.3-alpha.9

7 years ago

3.6.3-4211.1.8

7 years ago

3.6.3-4212.1.8

7 years ago

3.6.3-4209.1.8

7 years ago

3.6.3-4208.1.8

7 years ago

3.6.2

7 years ago

3.6.2-alpha.26

7 years ago

3.6.1

7 years ago

3.6.1-alpha.53

7 years ago

3.6.1-alpha.10

7 years ago

3.6.0

7 years ago

3.5.2-alpha.1

7 years ago

3.5.1

7 years ago

3.5.1-alpha.13

7 years ago

3.5.1-alpha.12

7 years ago

3.5.0

7 years ago

3.4.9-alpha.3

7 years ago

3.4.9-alpha.9

7 years ago

3.4.8

7 years ago

3.4.7

7 years ago

3.4.6

7 years ago

3.4.5

7 years ago

3.4.4

7 years ago

3.4.3

7 years ago

3.4.2

7 years ago

3.4.1

7 years ago

3.4.0

7 years ago

3.3.2

7 years ago

3.3.1

7 years ago

3.3.0

7 years ago

3.2.6

7 years ago

3.2.5

7 years ago

3.2.4

7 years ago

3.2.3

7 years ago

3.2.2

7 years ago

3.2.1

7 years ago

3.2.0

7 years ago

3.1.11

7 years ago

3.1.10

7 years ago

3.1.9

7 years ago

3.1.8

7 years ago

3.1.7

7 years ago

3.1.6

7 years ago

3.1.4

7 years ago

3.1.3

7 years ago

3.1.2

7 years ago

3.1.1

7 years ago

3.1.0

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.2-alpha.45

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.1.5

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.4.4

7 years ago

1.4.3

7 years ago

1.4.2

7 years ago

1.4.1

7 years ago

1.4.0

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.21

8 years ago

1.2.20

8 years ago

1.2.19

8 years ago

1.2.18

8 years ago

1.2.17

8 years ago

1.2.16

8 years ago

1.2.15

8 years ago

1.2.14

8 years ago

1.2.13

8 years ago

1.2.12

8 years ago

1.2.11

8 years ago

1.2.10

8 years ago

1.2.9

8 years ago

1.2.8

8 years ago

1.2.7

8 years ago

1.2.6

8 years ago

1.2.5

8 years ago

1.2.4

8 years ago

1.2.3

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago