Back to Polythene Text Field main page

Text Field component for React

• Options
• Usage
  • Help texts
  • Front-end validation
    • When to validate
  • Custom validation
    • Checking the field value with callback function "validate"
  • Using a validation library / setting the "valid" state directly
  • Character counter
  • Reading and setting the value
  • Programmatically setting focus and value
• Appearance
  • Styling
    • Themed component
    • CSS
    • Style
  • Dark or light tone

Options

Text Field options

Usage

import React from "react"
import { TextField } from "polythene-react"

<TextField label="Name" />

This creates a text input field with a hint label that disappears when text is entered (functionally equal to a placeholder).

Other types of input fields can be created using option type (for instance "number", "email" and so on).

To create a floating hint label that moves up when the field gets focus:

<TextField label="Name" floatingLabel />

A more compact field with floating hint label:

<TextField
  label="Name"
  floatingLabel
  dense
/>

Full-width field, compact field and with floating hint label:

<TextField
  label="Name"
  floatingLabel
  dense
  fullWidth
/>

Create a multi-line field (textarea) with multiLine:

<TextField
  label="Name"
  multiLine
  rows={4}
/>

Help texts

Pass help to create a help text below the field:

<TextField
  label="Your Name"
  help="Enter the name as written on the credit card"
/>

To show the help text only on focus, use focusHelp:

<TextField
  label="Your Name"
  help="Enter the name as written on the credit card"
  focusHelp
/>

A help text also function as error message when the field input is invalid.

Front-end validation

Passing required adds a mark * to the label, and uses HTML5 field validation to test for a non-empty value:

<TextField
  label="Your Name"
  required
  floatingLabel
  help="Enter the name as written on the credit card"
/>

When left empty, the field will show an error status.

Other supported validation checks:

• minLength
• maxLength
• min
• max
• pattern

When to validate

By default the component will validate only when a user action has been done (triggered by "onBlur"). This to make sure that required fields don't scream INVALID at initial page load.

Variations:

• To do validate immediately, use option validateAtStart
• Use option valid to bypass defaults - see "Custom validation" below
• To validate on key press before "onBlur", use option validateOnInput
• To reset all error messages when the field is cleared, use option validateResetOnClear

Custom validation

There are 2 ways to validate a field:

1. By checking the field value with callback function validate - use this when you want to simply check the validity on input (but note that it does not get triggered on form submit)
2. By setting the "valid" state directly - use this when you need to validate the entire form, so you keep the value in local state

Checking the field value with callback function "validate"

Option validate is a function that receives the current field value and is called on every onInput. Return an object with attributes valid (Boolean) and error (message string):

<TextField
  validate={value => {
    if (value !== value.toLowerCase()) {
      return {
        valid: false,
        error: "Only use lowercase characters."
      }
    }
  }}
/>

Using a validation library / setting the "valid" state directly

An external form validation library (or component/app state) can be used to manage the form state.

• Use valid to mark the valid state of the form field
• Use error to display an error message

const errors = this.form.getError()
// ...

<TextField
  name="username"
  required
  valid={!errors.username}
  error={errors.username}
/>

Character counter

Adding counter with a value adds a live counter below the field:

<TextField
  label="Your Name"
  counter={30}
/>

After 30 characters, the field with show an error status, but the user will be able to type more characters.

To limit the input to 30 characters, add constraint maxlength:

<TextField
  label="Your Name"
  counter={30}
  maxLength={30}
  error="You have exceeded the maximum number of characters."
/>

Reading and setting the value

See also Handling state.

To read the input value, use onChange:

<TextField
  onChange={newState => this.setState({ value: newState.value })} 
/>

To use the received input value, pass value:

<TextField
  onChange={newState => this.setState({ value: newState.value })}
/>
<p>{`Value: ${value}`}</p>

Programmatically setting focus and value

The onChange callback returns the function setInputState to set the focus and value of the input element.

<TextField
  label: "Your name",
  onChange={({ setInputState }) => this.setState({ setInputState })} 
/>,
<Button
  label="Set focus"
  events={{
    onClick={() => this.state.setInputState({ focus: true })}
  }}
/>
<Button
  label="Clear"
  events={{
    onClick={() => this.state.setInputState({ focus: true, value: "" })}
  }}
/>

Appearance

Styling

Below are examples how to change the TextField appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { TextFieldCSS } from "polythene-css"

TextFieldCSS.addStyle(".themed-textfield", {
  color_light_input_text: "#0D47A1",
  color_light_input_background: "#BBDEFB",
  color_light_focus_border: "#0D47A1",
  input_padding_h: 16
})

<TextField className="themed-textfield" />

CSS

Change CSS using the Text Field CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/textfield"

Style

Some style attributes can be set using option style. For example:

<TextField
  style={{
    background: "#2196F3"
  }}
/>

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set