@payfit/unity-components
Version:
118 lines (117 loc) • 3.23 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren, ReactNode } from 'react';
export declare const fieldset: import('tailwind-variants').TVReturnType<{
isLegendHidden: {
true: {
legend: string;
description: string;
fieldsContainer: string;
};
false: {
legend: string;
description: string;
fieldsContainer: string;
};
};
disableEndMargin: {
true: {
base: string;
};
};
}, {
base: string;
legend: string;
description: string;
fieldsContainer: string;
}, undefined, {
isLegendHidden: {
true: {
legend: string;
description: string;
fieldsContainer: string;
};
false: {
legend: string;
description: string;
fieldsContainer: string;
};
};
disableEndMargin: {
true: {
base: string;
};
};
}, {
base: string;
legend: string;
description: string;
fieldsContainer: string;
}, import('tailwind-variants').TVReturnType<{
isLegendHidden: {
true: {
legend: string;
description: string;
fieldsContainer: string;
};
false: {
legend: string;
description: string;
fieldsContainer: string;
};
};
disableEndMargin: {
true: {
base: string;
};
};
}, {
base: string;
legend: string;
description: string;
fieldsContainer: string;
}, undefined, unknown, unknown, undefined>>;
export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
/**
* The legend of the fieldset.
*/
legend: ReactNode;
/**
* An optional description of the fieldset.
*/
description?: string;
/**
* Whether to hide the legend of the fieldset.
*/
isLegendHidden?: boolean;
/**
* Whether to disable the end margin of the fieldset.
*/
disableEndMargin?: boolean;
}
/**
* The `Fieldset` component groups related form fields together with an accessible structure.
* It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
* @param {FieldsetProps} props - The props for the `Fieldset` component
* @see {@link FieldsetProps} for all available props
* @example
* ```tsx
* import { Fieldset } from '@payfit/unity-components'
*
* function Example() {
* return (
* <Fieldset
* legend="Personal Information"
* description="Please provide your contact details"
* isLegendHidden={false}
* >
* <TextField name="firstName" label="First name" />
* <TextField name="lastName" label="Last name" />
* </Fieldset>
* )
* }
* ```
* @remarks
* [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
*/
declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
export { Fieldset };