@fluentui/react-northstar
Version:
A themable React component library.
60 lines (59 loc) • 2.88 kB
TypeScript
import { Accessibility, FormFieldBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { ShorthandValue, FluentComponentStaticProps } from '../../types';
import { TextProps } from '../Text/Text';
import { BoxProps } from '../Box/Box';
export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<FormFieldBehaviorProps>;
/**
* @deprecated
* A control for the form field.
*/
control?: ShorthandValue<BoxProps>;
/** The HTML input id. This will be set on the control element and will be use for linking it with the label for correct accessibility. */
id?: string;
/** A field can have its label next to instead of above it. */
inline?: boolean;
/** A label for the form field. */
label?: ShorthandValue<TextProps>;
/** Text message that will be displayed below the control (can be used for error, warning, success messages). */
message?: ShorthandValue<TextProps>;
/** The HTML input name. */
name?: string;
/** A field can show that input is mandatory. */
required?: boolean;
/** The HTML input type. */
type?: string;
/** Message to be shown when input has error */
errorMessage?: ShorthandValue<TextProps>;
}
export declare const formFieldClassName = "ui-form__field";
export declare const formFieldMessageClassName = "ui-form__field__message";
export declare type FormFieldStylesProps = Required<Pick<FormFieldProps, 'type' | 'inline' | 'required'>> & {
hasErrorMessage: boolean;
};
/**
* A FormField represents a Form element containing a label and an input.
*/
export declare const FormField: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof FormFieldProps> & {
as?: TExtendedElementType;
} & FormFieldProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<FormFieldProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<FormFieldProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof FormFieldProps> & {
as?: "div";
} & FormFieldProps;
} & FluentComponentStaticProps<FormFieldProps>;