office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
88 lines (87 loc) • 2.61 kB
TypeScript
import * as React from 'react';
/**
* TextField component props.
*/
export interface ITextFieldProps extends React.HTMLProps<HTMLInputElement | HTMLTextAreaElement> {
/**
* Whether or not the textfield is a multiline textfield.
* @default false
*/
multiline?: boolean;
/**
* Whether or not the multiline textfield is resizable.
* @default true
*/
resizable?: boolean;
/**
* Whether or not the textfield is underlined.
* @default false
*/
underlined?: boolean;
/**
* Label for the textfield.
*/
label?: string;
/**
* The textfield input description
*/
description?: string;
/**
* CSS class for the icon.
*/
iconClass?: string;
/**
* Default value of the textfield, if any. Only provide this if the textfield is an uncontrolled component;
* otherwise, use the "value" property.
*/
defaultValue?: string;
/**
* Current value of the textfield. Only provide this if the textfield is a controlled component where you
* are maintaining its current state; otherwise, use the "defaultValue" property.
*/
value?: string;
/**
* Disabled state of the textfield.
* @default false
*/
disabled?: boolean;
/**
* Default value of the textfield, if any.
*/
errorMessage?: string;
/**
* Callback for the onChanged event.
*/
onChanged?: (newValue: any) => void;
/**
* Callback for the onBeforeChange event.
*/
onBeforeChange?: (newValue: any) => void;
/**
* Callback for the onNotifyValidationResult event.
*/
onNotifyValidationResult?: (errorMessage: string, value: string) => void;
/**
* The method is used to get the validation error message and determine whether the input value is valid or not.
*
* When it returns string:
* - If valid, it returns empty string.
* - If invalid, it returns the error message string and the text field will
* show a red border and show an error message below the text field.
*
* When it returns Promise<string>:
* - The resolved value is display as error message.
* - The rejected, the value is thrown away.
*
*/
onGetErrorMessage?: (value: string) => string | PromiseLike<string>;
/**
* Text field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
* @default 200
*/
deferredValidationTime?: number;
/**
* Aria Label for textfield, if any.
*/
ariaLabel?: string;
}