@arterial/textfield

Arterial Text Field

Another React Material Text Field

Installation

npm install @arterial/textfield

Usage

Styles

Sass

@use "@material/floating-label/index.scss" as floating-label;
@use "@material/line-ripple/index.scss" as line-ripple;
@use "@material/notched-outline/index.scss" as notched-outline;
@use "@material/textfield/helper-text/index.scss" as textfield-helper-text;
@use "@material/textfield/character-count/index.scss" as textfield-character-count;
@use "@material/textfield/icon/index.scss" as textfield-icon;
@use "@material/textfield/index.scss" as textfield;
@include floating-label.core-styles;
@include line-ripple.core-styles;
@include notched-outline.core-styles;
@include textfield-helper-text.helper-text-core-styles;
@include textfield-character-count.character-count-core-styles;
@include textfield-icon.icon-core-styles;
@include textfield.core-styles;

CSS

import '@material/textfield/dist/mdc.textfield.css';

JSX

import {TextField, HelperText} from '@arterial/textfield';

Filled Text Field

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.

function Filled() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      id="filled"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Outlined Text Field

Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.

function Outlined() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      id="outlined"
      label="Outlined"
      onChange={e => setValue(e.target.value)}
      outlined
      value={value}
    />
  );
}

Other Variants

Helper Text Object

function HelperTextObject() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={{
        persistent: true,
        validationMsg: true,
        text: 'Helper text as object.',
      }}
      id="filled-helper-text-object"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Helper Text Component

function HelperTextComponent() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-helper-text-component"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Leading Icon

function LeadingIcon() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      icon="calendar_today"
      id="filled-leading-icon"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Trailing Icon

function TrailingIcon() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-trailing-icon"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      trailingIcon="search"
      value={value}
    />
  );
}

Trailing Icon Action

function TrailingIconAction() {
  const [value, setValue] = useState('');
  return (
    <TextField
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-trailing-icon"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      onTrailingIconAction={() => setValue('')}
      trailingIcon="delete"
      value={value}
    />
  );
}

Invalid

function Invalid() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-invalid"
      invalid
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Label Floating

function LabelFloating() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-label-floating"
      label="Filled"
      labelFloating
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

End aligned

function EndAligned() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      endAligned
      id="filled-end-aligned"
      onChange={e => setValue(e.target.value)}
      placeholder="Filled"
      value={value}
    />
  );
}

No Label

function NoLabel() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-no-label"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Disabled

function Disabled() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      disabled
      id="filled-disabled"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Placeholder

function Placeholder() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-placeholder"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      placeholder="Placeholder"
      value={value}
    />
  );
}

Required

function Required() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-required"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      required
      value={value}
    />
  );
}

Loader

function Loader() {
  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);
  return (
    <>
      <Button
        label="Start Loader"
        onClick={() => {
          setLoading(true);
          setTimeout(() => {
            setLoading(false);
          }, 5000);
        }}
        style={{marginBottom: '8px'}}
      />
      <Textfield
        disabled={loading}
        helperText={
          <HelperText
            persistent
            validationMsg
            text="Helper text as component."
          />
        }
        id="filled-loader"
        label="Filled"
        labelFloating
        onChange={e => setValue(e.target.value)}
        placeholder={loading ? 'Loading...' : null}
        trailingIcon={loading ? <CircularProgress small /> : null}
        value={value}
      />
    </>
  );
}

Pre-filled

function PreFilled() {
  const [value, setValue] = useState('pre-filled');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-pre-filled"
      label="Filled"
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Prefix

function Prefix() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-prefix"
      label="Filled"
      labelFloating
      onChange={e => setValue(e.target.value)}
      prefix="$"
      value={value}
    />
  );
}

Suffix

function Suffix() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-suffix"
      label="Filled"
      labelFloating
      onChange={e => setValue(e.target.value)}
      suffix=".00"
      value={value}
    />
  );
}

Character Count

function CharacterCount() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="filled-suffix"
      label="Filled"
      maxLength={5}
      onChange={e => setValue(e.target.value)}
      value={value}
    />
  );
}

Textarea

function Textarea() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="textarea"
      onChange={e => setValue(e.target.value)}
      textarea
      value={value}
    />
  );
}

Textarea Character Count

function TextareaCharacterCount() {
  const [value, setValue] = useState('');
  return (
    <Textfield
      helperText={
        <HelperText persistent validationMsg text="Helper text as component." />
      }
      id="textarea"
      maxLength={5}
      onChange={e => setValue(e.target.value)}
      textarea
      value={value}
    />
  );
}

Props

TextField

Name	Type	Description
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
disabled	boolean	Indicates whether the element is disabled.
helperText	node	Gives context about a select, such as how the selection will be used.
icon	string | node	Icon to render within root element.
id	string	Id of the element.
invalid	boolean	Indicates the select is invalid.
fullwidth	string	Sets the text field to full width.
label	string	Text to be displayed within the root element.
labelFloating	boolean	Indicates whether the elements label is floating.
maxLength	string | number	Maximum length in characters of the value. Enables character counter.
noLabel	boolean	Enables no label variant.
onChange	function	Change event handler.
onFocus	function	Focus event handler.
onIconAction	function	Icon action event handler.
onTrailingIconAction	function	Trailing icon action event handler.
outlined	boolean	Enables an outlined variant.
placeholder	string	Text to be displayed in the select when it has no value.
prefix	string	Text to be displayed before value.
style	object	Styles to be applied to the root element.
suffix	string	Text to be displayed after value.
textarea	boolean	Enables text area variant.
trailingIcon	string | node	Icon to render on the right side of the root element.
type	string	Determines type of text field. Defaults to text.
value	string	Value of input.

HelperText

Name	Type	Description
className	string	Classes to be applied to the root element.
id	string	Id of the element.
persistent	boolean	Makes the helper text permanently visible.
validationMsg	boolean	Indicates the helper text is a validation message.
text	string	Text to be displayed.