MaterialTextInput component

State

• Test coverage: --%
• Known bugs: --
• Figma: https://www.figma.com/file/yl8T5ivrlqO2TELws3XRrp/Material-components?node-id=1%3A2
• Zeroheight: https://zeroheight.com/135a7addc/p/44f7a3-text-fields

Usage

Import like this:

import { MaterialTextInput } from '@tdcerhverv/text-input';

This component can be used as a single line Text Field, a flexible Multiline input, or a larger Text Area:

//1. Single Line:
<MaterialTextInput />

//2. Multiline:
<MaterialTextInput multiline />

//3. Text Area:
<MaterialTextInput multiline rows={numberOfRows} />

Props

All standard input props work, and then these as well:

labelText?: string;
error?: string | boolean;
hideValidation?: boolean;
validateBeforeFocus?: boolean;
loading?: boolean;
showClearIndicator?: boolean;
assistiveText?: string;
characterLimit?: number;
characterLimitErrorMsg?: string;
ref?: React.Ref<HTMLInputElement>;

Additionally, as this component is built upon a Material-UI TextField component, all standard props for that component are accepted. In particular, the multiline and rows props are used as detailed above in usage.

Tags

text-input, input, textarea, form, forms

TextInput component

State

• Test coverage: --%
• Known bugs: --
• Storybook: https://storybook.knet.lqd.dk/?path=/story/text-input--all-props
• Zeroheight: --
• Missing: Icons will come in a later update.

Usage

Import like this:

import { TextInput } from '@tdcerhverv/text-input';

Props

All standard input props work, and then these as well:

interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
  labelText?: string;
  error?: string | boolean;
  hideValidation?: boolean;
  loading?: boolean;
  ref?: React.Ref<HTMLInputElement>;
}

Tags

text-input