tf
@rmwc/text-field
npm i @rmwc/text-field
tf

@rmwc/text-field

A React wrapper for Material Design (Web) Components

by James Friedman

1.10.1-alpha.0 (see all)License:MITTypeScript:Not Found
npm i @rmwc/text-field
Readme

Text Fields

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

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 box withLeadingIcon="search" label="box withLeadingIcon..." />

{/* If you need full control over the icon, you can pass TextFieldIcon in and add your own props. */}
<TextField box withTrailingIcon={<TextFieldIcon icon="close"/>} label="box withTrailingIcon..." />

{/* 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..." />

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 box label="text" type="text"/>
<TextField box label="color" type="color" style={{width: '6rem'}}/>
<TextField box label="date" type="date"/>
<TextField box label="datetime-local" type="datetime-local"/>
<TextField box label="month" type="month"/>
<TextField box label="range" type="range"/>
<TextField box label="time" type="time"/>
<TextField box label="week" type="week"/>
import { DocumentComponent } from 'rmwc/Base/utils/DocumentComponent';

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

Downloads/wk

3

GitHub Stars

1.6K

LAST COMMIT

NaNyrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

6

OPEN PRs

2
VersionTagPublished
1.10.1-alpha.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate