chore: add a Fieldset component

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/atoms/forms/fieldset.tsx b/src/components/atoms/forms/fieldset.tsx
new file mode 100644
index 0000000..99d31e7
--- /dev/null
+++ b/src/components/atoms/forms/fieldset.tsx
@@ -0,0 +1,59 @@
+import { FC, ReactNode } from 'react';
+import styles from './fieldset.module.scss';
+
+export type FieldsetProps = {
+  /**
+   * The fieldset body.
+   */
+  children: ReactNode | ReactNode[];
+  /**
+   * Set additional classnames to the fieldset wrapper.
+   */
+  className?: string;
+  /**
+   * The fieldset legend.
+   */
+  legend: string;
+  /**
+   * Set additional classnames to the legend.
+   */
+  legendClassName?: string;
+  /**
+   * The legend position. Default: stacked.
+   */
+  legendPosition?: 'inline' | 'stacked';
+  /**
+   * An accessible role. Default: group.
+   */
+  role?: 'group' | 'radiogroup' | 'presentation' | 'none';
+};
+
+/**
+ * Fieldset component
+ *
+ * Render a fieldset with a legend.
+ */
+const Fieldset: FC<FieldsetProps> = ({
+  children,
+  className = '',
+  legend,
+  legendClassName = '',
+  legendPosition = 'stacked',
+  ...props
+}) => {
+  const wrapperModifier = `wrapper--${legendPosition}`;
+
+  return (
+    <fieldset
+      className={`${styles.wrapper} ${styles[wrapperModifier]} ${className}`}
+      {...props}
+    >
+      <legend className={`${styles.legend} ${legendClassName}`}>
+        {legend}
+      </legend>
+      {children}
+    </fieldset>
+  );
+};
+
+export default Fieldset;