@rmwc/textfield

Text Fields

Text fields allow users to input, edit, and select text.

• Module @rmwc/textfield
• Import styles:
  • import '@material/textfield/dist/mdc.textfield.css';
  • import '@material/floating-label/dist/mdc.floating-label.css';
  • import '@material/notched-outline/dist/mdc.notched-outline.css';
  • import '@material/line-ripple/dist/mdc.line-ripple.css';
• MDC Docs: https://material.io/develop/web/components/input-controls/text-field/

Text Field Variants

import { TextField, TextFieldIcon, TextFieldHelperText } from '@rmwc/textfield';

{/* Standard text field. */}
<TextField label="standard..." />

{/* Help text can be added to appear on focus. Place it directly after TextField. */}
<TextFieldHelperText>Optional help text.</TextFieldHelperText>

{/* Leading and trailing icons can be used, they look the best with the box prop. You can pass anything the Icon component accepts. */}
<TextField withLeadingIcon="search" withTrailingIcon="close" label="withLeadingIcon..." />

{/* If you need full control over the icon, you can pass TextFieldIcon in and add your own props. Dont forget the TabIndex to make it clickable*/}
<TextField
  label="withTrailingIcon..." 
  withTrailingIcon={
    <TextFieldIcon
      tabIndex="0"
      icon="close"
      onClick={() => console.log('Clear')}/>
  } 
/>

{/* An outlined TextField */}
<TextField outlined label="outlined..." />

{/* A fullWidth input. */}
<TextField fullwidth placeholder="fullWidth..."/>

{/* You can make the TextField a textarea. */}
<TextField textarea fullwidth label="textarea..." rows="8" />

{/* You can optionally make HelperText always visible with the persistent prop. */}
<TextFieldHelperText persistent validationMsg>The field is required.</TextFieldHelperText>

{/* Disabled text field. */}
<TextField disabled label="disabled..." />

{/* Invalid text fields. */}
<TextField invalid label="Invalid..." value="#@!$" onChange={() => {}}/>
<TextField label="Validate Pattern" pattern="[A-Za-z]{3}"/>

HTML Input Types

A preview of how material-components-web handles styling input types for your browser.

import { TextField, TextFieldIcon, TextFieldHelperText } from '@rmwc/textfield';

<TextField label="text" type="text"/>
<TextField label="color" type="color" style={{width: '6rem'}}/>
<TextField label="date" type="date"/>
<TextField label="datetime-local" type="datetime-local"/>
<TextField label="month" type="month"/>
<TextField label="range" type="range"/>
<TextField label="time" type="time"/>
<TextField label="week" type="week"/>

import { DocumentComponent } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';
import * as iconDocs from '@rmwc/icon//docgen.json';

<DocumentComponent docs={docs} displayName="TextField" />
<DocumentComponent docs={[docs, iconDocs]} displayName="TextFieldIcon" composes={['Icon']}/>
<DocumentComponent docs={docs} displayName="TextFieldHelperText" />

Changelog

4.0.0 (2018-11-26)

Breaking Changes

• apiRef: apiRef has been removed from the library. If you were using, just use the standard react “ref” if you need to get access to the class internals. (41c2c149)
• Chip:
  • Refactor to reduce the complexity, implementation, and event handling of Chips #354 (eb62bcac)
  • Refactor to reduce the complexity, implementation, and event handling of Chips #354 (69139821)

Documentation Changes

• Contributing: Updating contributing docs with a bit more info fixes #359 (73b34da8)
• Slider: Adding known slider issue to documentation fixes #367 (a9d9f0fc)
• ThemeProvider: Fixes empty onError property in example dropdown. closes #363 (714be619)

New Features

• Dialog: Adds lifecycle hooks fixes #355 (68aab17e)

Bug Fixes

• Switch: Corrects issue with controlled Switch using Safari fixes #374 (8dd7525b)
• SelectIcon: Circumventing foundation to allow release due to MDC bug (e1c8fb6c)
• MDC:
  • Corrects and updates imports throughout components to match MDCs new export path. #354 (b81bdf14)
  • Corrects and updates imports throughout components to match MDCs new export path. #354 (b6438b44)
• Radio:
  • removes deprecated adapter call, adds missing ripple #354 (405180e9)
  • removes deprecated adapter call, adds missing ripple #354 (d53bb0da)

Refactors

• Dependencies: Move all 3rd party deps to base (d163492b)
• Select:
  • The Select component now uses the foundation / adapter pattern and includes an enhanced variant. A small caveat is the Select will no longer appear to show a value when no value or defaultValue is given. If you were relying on this behavior before, just pass defaultValue or value. #354 (ef5a104e)
  • The Select component now uses the foundation / adapter pattern and includes an enhanced variant. A small caveat is the Select will no longer appear to show a value when no value or defaultValue is given. If you were relying on this behavior before, just pass defaultValue or value. #354 (11de8e1f)