@atlaskit/form/report.api.md

A form allows people to input information.

<!-- API Report Version: 2.3 -->

## API Report File for "@atlaskit/form"

> Do not edit this file. This report is auto-generated using
> [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

### Table of contents

- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)

### Main Entry Types

<!--SECTION START: Main Entry Types-->

```ts
import { FC } from 'react';
import { FormApi as FormApi_2 } from 'final-form';
import { FormEvent } from 'react';
import { FormState } from 'final-form';
import { jsx } from '@emotion/react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';

// @public (undocumented)
type Align = 'end' | 'start';

// @public
export const CheckboxField: FC<CheckboxProps>;

// @public (undocumented)
export interface CheckboxFieldProps extends FieldProps<string | undefined> {
	// (undocumented)
	isChecked: boolean;
}

// @public (undocumented)
interface CheckboxProps {
	children: (args: {
		fieldProps: CheckboxFieldProps;
		error?: string;
		valid: boolean;
		meta: Meta;
	}) => ReactNode;
	defaultIsChecked?: boolean;
	isDisabled?: boolean;
	isRequired?: boolean;
	label?: ReactNode;
	name: string;
	value?: string;
}

// @public
export const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;

// @public (undocumented)
export function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(
	props: FieldComponentProps<FieldValue, Element>,
): jsx.JSX.Element;

// @public (undocumented)
interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
	children: (args: {
		fieldProps: FieldProps<FieldValue, Element>;
		error?: string;
		valid: boolean;
		meta: Meta;
	}) => ReactNode;
	defaultValue?: ((currentDefaultValue?: FieldValue) => FieldValue) | FieldValue;
	elementAfterLabel?: ReactNode;
	id?: string;
	isDisabled?: boolean;
	isRequired?: boolean;
	label?: ReactNode;
	name: string;
	testId?: string;
	transform?: (event: FieldValue | FormEvent<Element>, current: FieldValue) => FieldValue;
	validate?: (
		value: FieldValue | undefined,
		formState: Object,
		fieldState: Meta,
	) => Promise<string | void> | string | void;
}

// @public (undocumented)
export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
	// (undocumented)
	'aria-invalid': 'false' | 'true';
	// (undocumented)
	'aria-labelledby': string;
	// (undocumented)
	id: string;
	// (undocumented)
	isDisabled: boolean;
	// (undocumented)
	isInvalid: boolean;
	// (undocumented)
	isRequired: boolean;
	// (undocumented)
	name: string;
	// (undocumented)
	onBlur: () => void;
	// (undocumented)
	onChange: (value: FieldValue | FormEvent<Element>) => void;
	// (undocumented)
	onFocus: () => void;
	// (undocumented)
	value: FieldValue;
}

// @public
export const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;

// @public (undocumented)
interface FieldsetProps {
	children: ReactNode;
	legend?: ReactNode;
}

// @public (undocumented)
function Form<FormValues extends Record<string, any> = {}>(
	props: FormProps<FormValues>,
): JSX.Element;
export default Form;

// @public (undocumented)
export type FormApi<FormData> = FormApi_2<FormData>;

// @public (undocumented)
interface FormChildrenProps {
	// (undocumented)
	onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
	// (undocumented)
	onSubmit: (
		event?: React_2.FormEvent<HTMLFormElement> | React_2.SyntheticEvent<HTMLElement>,
	) => void;
	// (undocumented)
	ref: React_2.RefObject<HTMLFormElement>;
}

// @public
export function FormFooter({ align, children }: FormFooterProps): jsx.JSX.Element;

// @public (undocumented)
interface FormFooterProps {
	align?: Align;
	children?: ReactNode;
}

// @public
export const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;

// @public (undocumented)
interface FormHeaderProps {
	children?: ReactNode;
	description?: ReactNode;
	title?: ReactNode;
}

// @public (undocumented)
export interface FormProps<FormValues> {
	children: (args: {
		formProps: FormChildrenProps;
		disabled: boolean;
		dirty: boolean;
		submitting: boolean;
		getState: () => FormState<FormValues>;
		getValues: () => FormValues;
		setFieldValue: (name: string, value: any) => void;
		reset: (initialValues?: FormValues) => void;
	}) => ReactNode;
	isDisabled?: boolean;
	onSubmit: OnSubmitHandler<FormValues>;
}

// @public
export const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;

// @public (undocumented)
interface FormSectionProps {
	children?: ReactNode;
	description?: ReactNode;
	title?: ReactNode;
}

// @public
export const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;

// @public
interface InternalMessageProps {
	appearance?: MessageAppearance;
	children: ReactNode;
	// (undocumented)
	fieldId?: string;
	testId?: string;
}

// @public
export const Label: FC<LabelProps>;

// @public (undocumented)
export interface LabelProps {
	// (undocumented)
	children: ReactNode;
	// (undocumented)
	htmlFor: string;
	// (undocumented)
	id?: string;
	// (undocumented)
	testId?: string;
}

// @public
export const Legend: FC<LegendProps>;

// @public (undocumented)
export interface LegendProps {
	// (undocumented)
	children: ReactNode;
}

// @public (undocumented)
type MessageAppearance = 'default' | 'error' | 'valid';

// @public
type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;

// @public (undocumented)
interface Meta {
	// (undocumented)
	dirty: boolean;
	// (undocumented)
	dirtySinceLastSubmit: boolean;
	// (undocumented)
	error?: string;
	// (undocumented)
	submitError?: boolean;
	// (undocumented)
	submitFailed: boolean;
	// (undocumented)
	submitting: boolean;
	// (undocumented)
	touched: boolean;
	// (undocumented)
	valid: boolean;
	// (undocumented)
	validating?: boolean;
}

// @public (undocumented)
export type OnSubmitHandler<FormData> = (
	values: FormData,
	form: FormApi<FormData>,
	callback?: (errors?: Record<string, string>) => void,
) => Object | Promise<Object | void> | void;

// @public
export const RangeField: FC<RangeFieldProps>;

// @public (undocumented)
export interface RangeFieldProps {
	// (undocumented)
	children: (args: { fieldProps: RangeProps; error?: string; meta: Meta }) => React_2.ReactNode;
	defaultValue: ((currentDefaultValue?: number) => number) | number;
	id?: string;
	isDisabled?: boolean;
	label?: ReactNode;
	name: string;
}

// @public (undocumented)
type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;

// @public (undocumented)
export function RequiredAsterisk(): jsx.JSX.Element;

// @public (undocumented)
type SupportedElements = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

// @public
export const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;

// (No @packageDocumentation comment for this package)
```

<!--SECTION END: Main Entry Types-->

### Peer Dependencies

<!--SECTION START: Peer Dependencies-->

```json
{
	"react": "^16.8.0"
}
```

<!--SECTION END: Peer Dependencies-->