}
+ className={labelWrapperClass}
+ css={css`
+ /* For now assume vertical alignment of labels */
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .ac-help-text--danger {
+ /* Animate in the help text */
+ animation: ${appearKeyframes} ${0.3}s forwards ease-in-out;
+ }
+ `}
+ >
+ {label && (
+
+ {label}
+
+ )}
+ {children}
+ {hasHelpText && renderHelpText()}
+
+ );
+ }
+
+ return React.cloneElement(
+ children,
+ // @ts-ignore
+ mergeProps(children.props, {
+ ref,
+ })
+ );
+}
+
+// @ts-ignore
+let _Field = React.forwardRef(Field);
+export { _Field as Field };
diff --git a/src/field/FieldLabel.tsx b/src/field/FieldLabel.tsx
new file mode 100644
index 00000000..de435db7
--- /dev/null
+++ b/src/field/FieldLabel.tsx
@@ -0,0 +1,103 @@
+import { classNames, useDOMRef } from '../utils';
+import { DOMRef } from '@react-types/shared';
+import { css } from '@emotion/core';
+import { filterDOMProps } from '@react-aria/utils';
+import React, { ReactNode, ElementType, HTMLAttributes } from 'react';
+import { DOMProps, LabelableProps, ExtendableLabelProps } from '../types';
+import theme from '../theme';
+
+interface LabelProps {
+ children?: ReactNode;
+ htmlFor?: string; // for compatibility with React
+ for?: string;
+ elementType?: ElementType;
+}
+
+interface FieldLabelPropsBase
+ extends LabelProps,
+ LabelableProps,
+ ExtendableLabelProps,
+ DOMProps {
+ includeNecessityIndicatorInAccessibilityName?: boolean;
+}
+
+export interface FieldLabelProps
+ extends FieldLabelPropsBase,
+ HTMLAttributes
+ {isErrorMessage ? (
+ <>
+ {/* TODO support icons */}
+ {showErrorIcon && 'error icon here'}
+
+ );
+}
+
+/**
+ * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
+ */
+const _HelpText = React.forwardRef(HelpText);
+export { _HelpText as HelpText };
diff --git a/src/field/index.tsx b/src/field/index.tsx
new file mode 100644
index 00000000..bb7f4b70
--- /dev/null
+++ b/src/field/index.tsx
@@ -0,0 +1,2 @@
+export * from './Field';
+export * from './Addon';
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
new file mode 100644
index 00000000..f9e79344
--- /dev/null
+++ b/src/form/Form.tsx
@@ -0,0 +1,114 @@
+import {
+ Alignment,
+ DOMRef,
+ LabelPosition,
+ LabelableProps,
+ DOMProps,
+ AriaLabelingProps,
+} from '../types';
+import { classNames, useDOMRef } from '../utils';
+import { filterDOMProps } from '@react-aria/utils';
+import React, { useContext, ReactElement, FormEventHandler } from 'react';
+import { css } from '@emotion/core';
+import { Provider } from '../provider';
+
+let FormContext = React.createContext
+ {errorMessage}
+
+
+ ) : (
+
+ {description}
+
+ )}
+
+ {addonBefore != null ? {addonBefore} : null}
+
+ {
+ setIsFocused(true);
+ },
+ onBlur: () => setIsFocused(false),
+ })}
+ ref={inputRef as any}
+ rows={multiLine ? 1 : undefined}
+ className={classNames('ac-textfield__input', inputClassName)}
+ />
+
+ {validationState && !isLoading ? validation : null}
+ {isLoading && loadingIndicator}
+ {wrapperChildren}
+
+ );
+
+ if (label) {
+ textField = React.cloneElement(
+ textField,
+ mergeProps(textField.props, {
+ // TODO support muli-line text areas
+ className: multiLine ? 'ac-text-field--multiline' : '',
+ })
+ );
+ }
+
+ return (
+
- {
- notify({
- variant: 'success',
- title: 'Awesome!',
- message: 'Things worked as expected',
- action: {
- text: 'Try This',
- onClick: () => {},
- },
- });
- }}
- >
- Notify
-
- }
+
+
+ Hello
}>Action
+
-
+ >
+ {
+ notify({
+ variant: 'success',
+ title: 'Awesome!',
+ message: 'Things worked as expected',
+ action: {
+ text: 'Try This',
+ onClick: () => {},
+ },
+ });
+ }}
+ >
+ Notify
+
+ }
>
-
- Your predictions may be delayed by up to 10 minutes
-
+
+
-
-
- {holder}
-
+
+ Your predictions may be delayed by up to 10 minutes
+
- 
+
+
+ +