@als-tp/als-react-ts-ui
Version:
A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation
56 lines • 2.9 kB
TypeScript
/**
* ALSForm - Form component with compound pattern
*
* A comprehensive form component built on Base UI's Form and Field components,
* providing accessible, validated form controls with consistent styling.
*
* @example
* ```tsx
* import { ALSForm } from './ALSForm';
*
* function ContactForm() {
* const [errors, setErrors] = React.useState({});
*
* return (
* <ALSForm.Root errors={errors} onClearErrors={setErrors} onSubmit={handleSubmit}>
* <ALSForm.Field name="name">
* <ALSForm.Label required>Name</ALSForm.Label>
* <ALSForm.Control placeholder="Enter your name" required />
* <ALSForm.Error match="valueMissing">Name is required</ALSForm.Error>
* </ALSForm.Field>
*
* <ALSForm.Field name="email">
* <ALSForm.Label required>Email</ALSForm.Label>
* <ALSForm.Control type="email" placeholder="Enter email" required />
* <ALSForm.Error match="typeMismatch">Enter a valid email</ALSForm.Error>
* </ALSForm.Field>
*
* <ALSForm.Field name="message">
* <ALSForm.Label>Message</ALSForm.Label>
* <ALSForm.Textarea placeholder="Your message..." rows={4} />
* <ALSForm.Description>Optional feedback</ALSForm.Description>
* </ALSForm.Field>
*
* <ALSForm.Actions>
* <button type="submit">Submit</button>
* </ALSForm.Actions>
* </ALSForm.Root>
* );
* }
* ```
*/
import type { ALSFormErrors, ALSFormLayout, ALSFormSize, ALSFieldValidationMode, ALSFormRootProps, ALSFormFieldProps, ALSFormLabelProps, ALSFormControlProps, ALSFormTextareaProps, ALSFormErrorProps, ALSFormDescriptionProps, ALSFormActionsProps, ALSFormGroupProps, ALSFormRowProps } from "./ALSForm";
export declare const ALSForm: {
Root: import("react").ForwardRefExoticComponent<ALSFormRootProps & import("react").RefAttributes<HTMLFormElement>>;
Field: import("react").ForwardRefExoticComponent<ALSFormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
Label: import("react").ForwardRefExoticComponent<ALSFormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
Control: import("react").ForwardRefExoticComponent<ALSFormControlProps & import("react").RefAttributes<HTMLInputElement>>;
Textarea: import("react").FC<ALSFormTextareaProps>;
Error: import("react").FC<ALSFormErrorProps>;
Description: import("react").FC<ALSFormDescriptionProps>;
Actions: import("react").FC<ALSFormActionsProps>;
Group: import("react").FC<ALSFormGroupProps>;
Row: import("react").FC<ALSFormRowProps>;
};
export type { ALSFormErrors, ALSFormLayout, ALSFormSize, ALSFieldValidationMode, ALSFormRootProps, ALSFormFieldProps, ALSFormLabelProps, ALSFormControlProps, ALSFormTextareaProps, ALSFormErrorProps, ALSFormDescriptionProps, ALSFormActionsProps, ALSFormGroupProps, ALSFormRowProps, };
//# sourceMappingURL=index.d.ts.map