Socket
Socket
Sign inDemoInstall

@material/react-text-field

Package Overview
Dependencies
24
Maintainers
13
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/react-text-field

Material Components React Text Field


Version published
Maintainers
13
Weekly downloads
4,898
decreased by-37.91%

Weekly downloads

Readme

Source

React Text Field

MDC React Text Field is component for MDC Text Field. Please see MDC Text Field.

Installation

npm install @material/react-text-field

Usage

Styles

with Sass:

import '@material/react-text-field/index.scss';

with CSS:

import '@material/react-text-field/dist/text-field.css';

Javascript Instantiation

React Text Field accepts one child element which is the input element. For ease of integration, we have provided an input component to be used with React Text Field.

import React from 'react';
import TextField, {HelperText, Input} from '@material/react-text-field';
import MaterialIcon from '@material/react-material-icon';

class MyApp extends React.Component {
  state = {value: 'Woof'};

  render() {
    return (
      <div>
        <TextField
          label='Dog'
          helperText={<HelperText>Help Me!</HelperText>}
          onTrailingIconSelect={() => this.setState({value: ''})}
          trailingIcon={<MaterialIcon role="button" icon="delete"/>}
        ><Input
           value={this.state.value}
           onChange={(e) => this.setState({value: e.currentTarget.value})} />
        </TextField>
      </div>
    );
  }
}

NOTE: In order to get access to the value, you must add an onChange handler, which accepts an event and updates the value of the input as shown above.

Props

Prop NameTypeDescription
childrenElementMandatory. The input element of the text field.
classNameStringAn optional class added to the .mdc-text-field element.
denseBooleanEnables dense variant.
floatingLabelClassNameStringAn optional class added to the floating label element of the text field.
fullWidthBooleanEnables fullWidth variant.
helperTextElementHelper text that appears below the text field. Use the <HelperText> component that comes with this package.
labelStringAn optional label text that appears as the floating label or placeholder.
leadingIconElementAn icon element that appears as the leading icon.
lineRippleClassNameStringAn optional class added to the line ripple element.
notchedOutlineClassNameStringAn optional class added to the notched outline element.
onLeadingIconSelectFunctionOptional callback fired on interaction with leadingIcon.
onTrailingIconSelectFunctionOptional callback fired on interaction with trailingIcon.
outlinedBooleanEnables outlined variant.
textareaBooleanEnables textarea variant.
trailingIconElementAn icon element that appears as the trailing icon.

Input Props

Not all the props below are used for majority of cases. Properties like foundation shouldn't be used when implementing the text field, but is used internally in React Text Field.

Prop NameTypeDescription
inputTypestringHTML tag to be used to render input element. 'input' (default) or 'textarea'.
classNameStringClasses to be applied to the input element.
disabledFunctionDisables the input and the parent text field.
foundationFunctionThe text field foundation.
isValidBooleanIf set, this value will override the native input's validation.
idStringThe <input> id attribute.
onBlurFunctionBlur event handler.
onChangeFunctionChange event handler.
onFocusFunctionFocus event handler.
onMouseDownFunctionMouse down event handler.
onTouchStartFunctionTouch start event handler.
setDisabledFunctionCallback function that is called when the disabled prop updates.
setInputIdFunctionCallback function that is called when the id attribute updates.
handleFocusChangeFunctionCallback function that is called when focus or blur events occur
valueNumber/StringValue of the input.
refFunction(input: ReactElement) => voidOn mount of component, will call passed function with the instance of the <Input />.

NOTE: the <Input> component will receive all properties that a standard <input> accepts.

Accessing the Native Input element

There will be times when you need to access the native . For example if you need to focus the text field, you can add a ref callback method to the <Input /> element and access the <input />. The ref will accept a callback method and on mount and will pass the instance of the input component. Here is an example of how to programatically focus the <input />:

import React from 'react';
import TextField, {Input} from '@material/react-text-field';
import Button from '@material/react-button';

class MyApp extends React.Component {
  input = null;
  state = {value: 'Woof'};

  focusTextField = () => {
    if (!this.input) return;
    const inputElement = this.input.inputElement;
    if (inputElement) {
      inputElement.focus();
    }
  }

  render() {
    return (
      <div>
        <div>
          <Button onClick={this.focusTextField}>Focus Text Field</Button>
        </div>
        <TextField label='Dog'>
          <Input
            value={this.state.value}
            ref={input => this.input = input}
            onChange={(e) => this.setState({value: e.currentTarget.value})}/>
        </TextField>
      </div>
    );
  }
}

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins

Usage with Icons

Please see our Best Practices doc when importing or using icon fonts.

Keywords

FAQs

Last updated on 22 Jul 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc