TextField

Text fields let users enter and edit text. - Material Docs

import { TextField } from 'material-bread';

TextField components can either be flat , filled , or outlined . You can also pass any native TextInput props and it will be applied to the native element.

Label

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      one: '',
      two: '',
      three: ''
    }
  }
  render() {
    return (
     <View>
        <TextField
          label={'Label'}
          value={this.state.one}
          onChangeText={value => this.setState({ one: value })}
        />
        <TextField
          containerStyle={{ marginTop: 20 }}
          type={'outlined'}
          label={'Label'}
          value={this.state.two}
          onChangeText={value => this.setState({ two: value })}
        />
        <TextField
          containerStyle={{ marginTop: 20 }}
          type={'filled'}
          label={'Label'}
          value={this.state.three}
          onChangeText={value => this.setState({ three: value })}
        />
     </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { TextField} from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      one: '',
      two: '',
      three: ''
    }
  }
  render() {
    return (
     <View>
        <TextField
          label={'Label'}
          value={this.state.one}
          onChangeText={value => this.setState({ one: value })}
        />
        <TextField
          containerStyle={{ marginTop: 20 }}
          type={'outlined'}
          value={this.state.two}
          onChangeText={value => this.setState({ two: value })}
        />
        <TextField
          containerStyle={{ marginTop: 20 }}
          type={'Filled'}
          label={'Label'}
          error={true}
          value={this.state.two}
          onChangeText={value => this.setState({ three: value })}
          helperText={'There is an error'}
        />
     </View>
    );
  }
}

Name

Description

Type

Default

containerStyle

Styles the wrapping element

object

disabled

Whether component is disabled

bool

error

Toggles displaying error

bool

focused

Manual control of focus

bool

helperText

Renders text under the TextField

string

helperVisible

Wether or not helperText is visible

bool

helperTextStyle

Style of helpertext under the textfield

object

label

Display label within textfield

string

labelColor

Color of label within textfield

string

labelStyle

Style of label within textfield

object

focusedLabelColor

Style of label when focused

string

leadingIcon

Render arbitrary node on the left the input

node

onBlur

Callback on input blur

func

onFocus

Callback on input focus

func

prefix

Renders text node on the far leeft

node

style

Styles input element

object

suffix

Renders text node on the far right

node

trailingIcon

Render arbitrary node on the right the input

node

underlineColor

Color of underline when inactive

string

underlineActiveColor

Color of underline when active

string

theme.main.primary

You can see even more examples in the Storybook environment.

Icon



Icon



Icon



Live Editing

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        one: '',
        two: '',
        three: ''
    }
  }
  render() {
    return (
        <View >
            <TextField
                type={'flat'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <Icon name={'account-circle'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.one}
                onChangeText={value => this.setState({ one: value })}
            />
            <TextField
                type={'filled'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <Icon name={'date-range'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.two}
                onChangeText={value => this.setState({ two: value })}
            />
            <TextField
                type={'outlined'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <Icon name={'album'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.three}
                onChangeText={value => this.setState({ three: value })}
            />
        </View>
    );
  }
}

Icon





Icon





Icon





Live Editing

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        one: '',
        two: '',
        three: ''
    }
  }
  render() {
    return (
        <View >      
            <TextField
                type={'flat'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <IconButton name={'person'} size={24} color={'#6e6e6e'} />
                }
                trailingIcon={
                    <IconButton name={'clear'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.one}
                onChangeText={value => this.setState({ one: value })}
            />
            <TextField
                type={'filled'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <IconButton name={'date-range'} size={24} color={'#6e6e6e'} />
                }
                trailingIcon={
                    <IconButton name={'mic'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.two}
                onChangeText={value => this.setState({ two: value })}
            />
            <TextField
                type={'outlined'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                leadingIcon={
                    <IconButton name={'mic'} size={24} color={'#6e6e6e'} />
                }
                trailingIcon={
                    <IconButton name={'album'} size={24} color={'#6e6e6e'} />
                }
                value={this.state.three}
                onChangeText={value => this.setState({ three: value })}
            />
        </View>
    );
  }
}

Label

Some helper text here

Enter Code

5 digits are required

Hours

Between 1-24

Live Editing

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        one: '',
        two: '',
        three: ''
    }
  }
  render() {
    return (
        <View >      
            <TextField
                type={'flat'}
                label={'Label'}
                value={this.state.one}
                onChangeText={value => this.setState({ one: value })}
                helperText={'Some helper text here'}
            />
            <TextField
                type={'filled'}
                label={'Enter Code'}
                value={this.state.two}
                onChangeText={value => this.setState({ two: value })}
                helperText={'5 digits are required'}
            />
            <TextField
                type={'outlined'}
                label={'Hours'}
                value={this.state.three}
                onChangeText={value => this.setState({ three: value })}
                helperText={'Between 1-24'}
            />
        </View>
    );
  }
}

Label

Hours

Live Editing

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        one: '',
        two: '',
        three: ''
    }
  }
  render() {
    return (
        <View >      
            <TextField
                type={'flat'}
                label={'Label'}
                value={this.state.one}
                onChangeText={value => this.setState({ one: value })}
                dense
            />
            <TextField
                type={'filled'}
                value={this.state.two}
                onChangeText={value => this.setState({ two: value })}
                dense
                containerStyle={{marginVertical: 8}}
            />
            <TextField
                type={'outlined'}
                label={'Hours'}
                value={this.state.three}
                onChangeText={value => this.setState({ three: value })}
                dense
            />
        </View>
    );
  }
}

Icon

lbs

Icon

lbs

Icon

lbs

Live Editing

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        one: '',
        two: '',
        three: ''
    }
  }
  render() {
    return (
        <View >      
            <TextField
                type={'flat'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                prefix={<BodyText text={'$'} />}
                suffix={<Caption text="lbs" />}
                value={this.state.one}
                onChangeText={value => this.setState({ one: value })}
            />
            <TextField
                type={'filled'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                prefix={<BodyText text={'$'} />}
                suffix={<Caption text="lbs" />}
                value={this.state.two}
                onChangeText={value => this.setState({ two: value })}
            />
            <TextField
                type={'outlined'}
                containerStyle={{ marginTop: 20 }}
                label={'Icon'}
                prefix={<BodyText text={'$'} />}
                suffix={<Caption text="lbs" />}
                value={this.state.three}
                onChangeText={value => this.setState({ three: value })}
            />
        </View>
    );
  }
}

TextField

Component #

Usage #

Props #

Demos #

Leading Icon #

Trailing Icon #

HelperText #

Dense #

Prefix and Suffix #