From a6ff5eee45215effb3344cb5d631a27a7c0369aa Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Sep 2023 19:34:01 +0200
Subject: refactor(components): rewrite form components

---
 .../atoms/forms/boolean-field.module.scss          |   5 -
 .../atoms/forms/boolean-field.stories.tsx          | 175 --------------
 src/components/atoms/forms/boolean-field.test.tsx  |  60 -----
 src/components/atoms/forms/boolean-field.tsx       |  44 ----
 src/components/atoms/forms/field.stories.tsx       | 257 ---------------------
 src/components/atoms/forms/field.test.tsx          |  30 ---
 src/components/atoms/forms/field.tsx               | 111 ---------
 .../fields/boolean-field/boolean-field.module.scss |   7 +
 .../fields/boolean-field/boolean-field.stories.tsx | 175 ++++++++++++++
 .../fields/boolean-field/boolean-field.test.tsx    |  36 +++
 .../forms/fields/boolean-field/boolean-field.tsx   |  86 +++++++
 .../atoms/forms/fields/boolean-field/index.ts      |   1 +
 .../atoms/forms/fields/checkbox/checkbox.test.tsx  |  33 +++
 .../atoms/forms/fields/checkbox/checkbox.tsx       |  13 ++
 .../atoms/forms/fields/checkbox/index.ts           |   1 +
 .../atoms/forms/fields/fields.module.scss          |  50 ++++
 src/components/atoms/forms/fields/index.ts         |   6 +
 src/components/atoms/forms/fields/input/index.ts   |   1 +
 .../atoms/forms/fields/input/input.stories.tsx     | 237 +++++++++++++++++++
 .../atoms/forms/fields/input/input.test.tsx        |  34 +++
 src/components/atoms/forms/fields/input/input.tsx  |  72 ++++++
 src/components/atoms/forms/fields/radio/index.ts   |   1 +
 .../atoms/forms/fields/radio/radio.test.tsx        |  28 +++
 src/components/atoms/forms/fields/radio/radio.tsx  |  13 ++
 src/components/atoms/forms/fields/select/index.ts  |   1 +
 .../atoms/forms/fields/select/select.stories.tsx   | 143 ++++++++++++
 .../atoms/forms/fields/select/select.test.tsx      |  43 ++++
 .../atoms/forms/fields/select/select.tsx           |  76 ++++++
 .../atoms/forms/fields/text-area/index.ts          |   1 +
 .../forms/fields/text-area/text-area.stories.tsx   | 136 +++++++++++
 .../forms/fields/text-area/text-area.test.tsx      |  20 ++
 .../atoms/forms/fields/text-area/text-area.tsx     |  69 ++++++
 .../atoms/forms/fieldset/fieldset.module.scss      |  17 ++
 .../atoms/forms/fieldset/fieldset.stories.tsx      |  63 +++++
 .../atoms/forms/fieldset/fieldset.test.tsx         |  35 +++
 src/components/atoms/forms/fieldset/fieldset.tsx   |  68 ++++++
 src/components/atoms/forms/fieldset/index.ts       |   1 +
 src/components/atoms/forms/form.test.tsx           |  13 --
 src/components/atoms/forms/form.tsx                |  80 -------
 src/components/atoms/forms/form/form.test.tsx      |  13 ++
 src/components/atoms/forms/form/form.tsx           |  28 +++
 src/components/atoms/forms/form/index.ts           |   1 +
 src/components/atoms/forms/forms.module.scss       |  53 -----
 src/components/atoms/forms/index.ts                |   6 +-
 src/components/atoms/forms/label.module.scss       |  18 --
 src/components/atoms/forms/label.stories.tsx       | 104 ---------
 src/components/atoms/forms/label.test.tsx          |   9 -
 src/components/atoms/forms/label.tsx               |  40 ----
 src/components/atoms/forms/label/index.ts          |   1 +
 src/components/atoms/forms/label/label.module.scss |  18 ++
 src/components/atoms/forms/label/label.stories.tsx | 119 ++++++++++
 src/components/atoms/forms/label/label.test.tsx    |   9 +
 src/components/atoms/forms/label/label.tsx         |  62 +++++
 src/components/atoms/forms/legend/index.ts         |   1 +
 .../atoms/forms/legend/legend.module.scss          |   6 +
 .../atoms/forms/legend/legend.stories.tsx          |  27 +++
 src/components/atoms/forms/legend/legend.test.tsx  |  17 ++
 src/components/atoms/forms/legend/legend.tsx       |  21 ++
 src/components/atoms/forms/select.stories.tsx      | 151 ------------
 src/components/atoms/forms/select.test.tsx         |  30 ---
 src/components/atoms/forms/select.tsx              |  79 -------
 src/components/atoms/index.ts                      |   1 +
 src/components/atoms/modal/index.ts                |   1 +
 src/components/atoms/modal/modal.module.scss       |  66 ++++++
 src/components/atoms/modal/modal.stories.tsx       |  59 +++++
 src/components/atoms/modal/modal.test.tsx          |  25 ++
 src/components/atoms/modal/modal.tsx               |  49 ++++
 67 files changed, 1994 insertions(+), 1262 deletions(-)
 delete mode 100644 src/components/atoms/forms/boolean-field.module.scss
 delete mode 100644 src/components/atoms/forms/boolean-field.stories.tsx
 delete mode 100644 src/components/atoms/forms/boolean-field.test.tsx
 delete mode 100644 src/components/atoms/forms/boolean-field.tsx
 delete mode 100644 src/components/atoms/forms/field.stories.tsx
 delete mode 100644 src/components/atoms/forms/field.test.tsx
 delete mode 100644 src/components/atoms/forms/field.tsx
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.module.scss
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
 create mode 100644 src/components/atoms/forms/fields/boolean-field/index.ts
 create mode 100644 src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
 create mode 100644 src/components/atoms/forms/fields/checkbox/checkbox.tsx
 create mode 100644 src/components/atoms/forms/fields/checkbox/index.ts
 create mode 100644 src/components/atoms/forms/fields/fields.module.scss
 create mode 100644 src/components/atoms/forms/fields/index.ts
 create mode 100644 src/components/atoms/forms/fields/input/index.ts
 create mode 100644 src/components/atoms/forms/fields/input/input.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/input/input.test.tsx
 create mode 100644 src/components/atoms/forms/fields/input/input.tsx
 create mode 100644 src/components/atoms/forms/fields/radio/index.ts
 create mode 100644 src/components/atoms/forms/fields/radio/radio.test.tsx
 create mode 100644 src/components/atoms/forms/fields/radio/radio.tsx
 create mode 100644 src/components/atoms/forms/fields/select/index.ts
 create mode 100644 src/components/atoms/forms/fields/select/select.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/select/select.test.tsx
 create mode 100644 src/components/atoms/forms/fields/select/select.tsx
 create mode 100644 src/components/atoms/forms/fields/text-area/index.ts
 create mode 100644 src/components/atoms/forms/fields/text-area/text-area.stories.tsx
 create mode 100644 src/components/atoms/forms/fields/text-area/text-area.test.tsx
 create mode 100644 src/components/atoms/forms/fields/text-area/text-area.tsx
 create mode 100644 src/components/atoms/forms/fieldset/fieldset.module.scss
 create mode 100644 src/components/atoms/forms/fieldset/fieldset.stories.tsx
 create mode 100644 src/components/atoms/forms/fieldset/fieldset.test.tsx
 create mode 100644 src/components/atoms/forms/fieldset/fieldset.tsx
 create mode 100644 src/components/atoms/forms/fieldset/index.ts
 delete mode 100644 src/components/atoms/forms/form.test.tsx
 delete mode 100644 src/components/atoms/forms/form.tsx
 create mode 100644 src/components/atoms/forms/form/form.test.tsx
 create mode 100644 src/components/atoms/forms/form/form.tsx
 create mode 100644 src/components/atoms/forms/form/index.ts
 delete mode 100644 src/components/atoms/forms/forms.module.scss
 delete mode 100644 src/components/atoms/forms/label.module.scss
 delete mode 100644 src/components/atoms/forms/label.stories.tsx
 delete mode 100644 src/components/atoms/forms/label.test.tsx
 delete mode 100644 src/components/atoms/forms/label.tsx
 create mode 100644 src/components/atoms/forms/label/index.ts
 create mode 100644 src/components/atoms/forms/label/label.module.scss
 create mode 100644 src/components/atoms/forms/label/label.stories.tsx
 create mode 100644 src/components/atoms/forms/label/label.test.tsx
 create mode 100644 src/components/atoms/forms/label/label.tsx
 create mode 100644 src/components/atoms/forms/legend/index.ts
 create mode 100644 src/components/atoms/forms/legend/legend.module.scss
 create mode 100644 src/components/atoms/forms/legend/legend.stories.tsx
 create mode 100644 src/components/atoms/forms/legend/legend.test.tsx
 create mode 100644 src/components/atoms/forms/legend/legend.tsx
 delete mode 100644 src/components/atoms/forms/select.stories.tsx
 delete mode 100644 src/components/atoms/forms/select.test.tsx
 delete mode 100644 src/components/atoms/forms/select.tsx
 create mode 100644 src/components/atoms/modal/index.ts
 create mode 100644 src/components/atoms/modal/modal.module.scss
 create mode 100644 src/components/atoms/modal/modal.stories.tsx
 create mode 100644 src/components/atoms/modal/modal.test.tsx
 create mode 100644 src/components/atoms/modal/modal.tsx

(limited to 'src/components/atoms')

diff --git a/src/components/atoms/forms/boolean-field.module.scss b/src/components/atoms/forms/boolean-field.module.scss
deleted file mode 100644
index f299ddd..0000000
--- a/src/components/atoms/forms/boolean-field.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "../../../styles/abstracts/mixins" as mix;
-
-.hidden {
-  @include mix.visually-hidden;
-}
diff --git a/src/components/atoms/forms/boolean-field.stories.tsx b/src/components/atoms/forms/boolean-field.stories.tsx
deleted file mode 100644
index 3d6f8c3..0000000
--- a/src/components/atoms/forms/boolean-field.stories.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { BooleanField } from './boolean-field';
-
-/**
- * BooleanField - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: BooleanField,
-  args: {
-    hidden: false,
-  },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    checked: {
-      control: {
-        type: null,
-      },
-      description: 'The field state: true if checked.',
-      type: {
-        name: 'boolean',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    hidden: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the field should be visually hidden.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    onChange: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle field state change.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click on field.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'The field type. Either checkbox or radio.',
-      options: ['checkbox', 'radio'],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof BooleanField>;
-
-const Template: ComponentStory<typeof BooleanField> = ({
-  checked,
-  onChange: _onChange,
-  ...args
-}) => {
-  const [isChecked, setIsChecked] = useState<boolean>(checked);
-
-  return (
-    <BooleanField
-      checked={isChecked}
-      onChange={() => {
-        setIsChecked(!isChecked);
-      }}
-      {...args}
-    />
-  );
-};
-
-/**
- * Checkbox Story
- */
-export const Checkbox = Template.bind({});
-Checkbox.args = {
-  id: 'checkbox',
-  checked: false,
-  name: 'checkbox',
-  type: 'checkbox',
-  value: 'checkbox',
-};
-
-/**
- * Radio Story
- */
-export const Radio = Template.bind({});
-Radio.args = {
-  id: 'radio',
-  checked: false,
-  name: 'radio',
-  type: 'radio',
-  value: 'radio',
-};
diff --git a/src/components/atoms/forms/boolean-field.test.tsx b/src/components/atoms/forms/boolean-field.test.tsx
deleted file mode 100644
index 503d1ce..0000000
--- a/src/components/atoms/forms/boolean-field.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { BooleanField } from './boolean-field';
-
-describe('BooleanField', () => {
-  it('renders an unchecked checkbox', () => {
-    render(
-      <BooleanField
-        checked={false}
-        id="jest-checkbox"
-        name="jest-checkbox"
-        onChange={() => null}
-        type="checkbox"
-        value="checkbox"
-      />
-    );
-    expect(screen.getByRole('checkbox')).not.toBeChecked();
-  });
-
-  it('renders a checked checkbox', () => {
-    render(
-      <BooleanField
-        checked={true}
-        id="jest-checkbox"
-        name="jest-checkbox"
-        onChange={() => null}
-        type="checkbox"
-        value="checkbox"
-      />
-    );
-    expect(screen.getByRole('checkbox')).toBeChecked();
-  });
-
-  it('renders an unchecked radio', () => {
-    render(
-      <BooleanField
-        checked={false}
-        id="jest-radio"
-        name="jest-radio"
-        onChange={() => null}
-        type="radio"
-        value="radio"
-      />
-    );
-    expect(screen.getByRole('radio')).not.toBeChecked();
-  });
-
-  it('renders a checked radio', () => {
-    render(
-      <BooleanField
-        checked={true}
-        id="jest-radio"
-        name="jest-radio"
-        onChange={() => null}
-        type="radio"
-        value="radio"
-      />
-    );
-    expect(screen.getByRole('radio')).toBeChecked();
-  });
-});
diff --git a/src/components/atoms/forms/boolean-field.tsx b/src/components/atoms/forms/boolean-field.tsx
deleted file mode 100644
index 8f33a42..0000000
--- a/src/components/atoms/forms/boolean-field.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FC, InputHTMLAttributes } from 'react';
-import styles from './boolean-field.module.scss';
-
-export type BooleanFieldProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'hidden' | 'name' | 'type' | 'value'
-> & {
-  /**
-   * True if the field should be checked.
-   */
-  checked: boolean;
-  /**
-   * True if the field should be visually hidden. Default: false.
-   */
-  hidden?: boolean;
-  /**
-   * Field name attribute.
-   */
-  name: string;
-  /**
-   * The input type.
-   */
-  type: 'checkbox' | 'radio';
-  /**
-   * Field name attribute.
-   */
-  value: string;
-};
-
-/**
- * BooleanField component
- *
- * Render a checkbox or a radio input type.
- */
-export const BooleanField: FC<BooleanFieldProps> = ({
-  className = '',
-  hidden = false,
-  ...props
-}) => {
-  const modifier = hidden ? 'hidden' : '';
-  const inputClass = `${styles[modifier]} ${className}`;
-
-  return <input {...props} className={inputClass} />;
-};
diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx
deleted file mode 100644
index 27fd3be..0000000
--- a/src/components/atoms/forms/field.stories.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { Field } from './field';
-
-/**
- * Field - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms/Fields',
-  component: Field,
-  args: {
-    disabled: false,
-    required: false,
-  },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Field state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-      description: 'Maximum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    min: {
-      control: {
-        type: 'number',
-      },
-      description: 'Minimum value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      description: 'A placeholder value.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    setValue: {
-      control: {
-        type: null,
-      },
-      description: 'Callback function to set field value.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    step: {
-      control: {
-        type: 'number',
-      },
-      description: 'Field incremental values that are valid.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Field type: input type or textarea.',
-      options: [
-        'datetime-local',
-        'email',
-        'number',
-        'search',
-        'tel',
-        'text',
-        'textarea',
-        'time',
-        'url',
-      ],
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Field>;
-
-const Template: ComponentStory<typeof Field> = ({
-  value: _value,
-  setValue: _setValue,
-  ...args
-}) => {
-  const [value, setValue] = useState<string>('');
-
-  return <Field value={value} setValue={setValue} {...args} />;
-};
-
-/**
- * Field Story - DateTime
- */
-export const DateTime = Template.bind({});
-DateTime.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'datetime-local',
-};
-
-/**
- * Field Story - Email
- */
-export const Email = Template.bind({});
-Email.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'email',
-};
-
-/**
- * Field Story - Text
- */
-export const Text = Template.bind({});
-Text.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'text',
-};
-
-/**
- * Field Story - Number
- */
-export const Number = Template.bind({});
-Number.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'number',
-};
-
-/**
- * Field Story - TextArea
- */
-export const TextArea = Template.bind({});
-TextArea.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'textarea',
-};
-
-/**
- * Field Story - Time
- */
-export const Time = Template.bind({});
-Time.args = {
-  id: 'field-storybook',
-  name: 'field-storybook',
-  type: 'time',
-};
diff --git a/src/components/atoms/forms/field.test.tsx b/src/components/atoms/forms/field.test.tsx
deleted file mode 100644
index 492aa48..0000000
--- a/src/components/atoms/forms/field.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Field } from './field';
-
-describe('Field', () => {
-  it('renders a text input', () => {
-    render(
-      <Field
-        id="text-field"
-        name="text-field"
-        type="text"
-        value=""
-        setValue={() => null}
-      />
-    );
-    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
-  });
-
-  it('renders a search input', () => {
-    render(
-      <Field
-        id="search-field"
-        name="search-field"
-        type="search"
-        value=""
-        setValue={() => null}
-      />
-    );
-    expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search');
-  });
-});
diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
deleted file mode 100644
index a4553e3..0000000
--- a/src/components/atoms/forms/field.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  ChangeEvent,
-  forwardRef,
-  ForwardRefRenderFunction,
-  SetStateAction,
-} from 'react';
-import styles from './forms.module.scss';
-
-export type FieldType =
-  | 'datetime-local'
-  | 'email'
-  | 'number'
-  | 'search'
-  | 'tel'
-  | 'text'
-  | 'textarea'
-  | 'time'
-  | 'url';
-
-export type FieldProps = {
-  /**
-   * One or more ids that refers to the field name.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Add classnames to the field.
-   */
-  className?: string;
-  /**
-   * Field state. Either enabled (false) or disabled (true).
-   */
-  disabled?: boolean;
-  /**
-   * Field id attribute.
-   */
-  id: string;
-  /**
-   * Field maximum value.
-   */
-  max?: number | string;
-  /**
-   * Field minimum value.
-   */
-  min?: number | string;
-  /**
-   * Field name attribute.
-   */
-  name: string;
-  /**
-   * Placeholder value.
-   */
-  placeholder?: string;
-  /**
-   * True if the field is required. Default: false.
-   */
-  required?: boolean;
-  /**
-   * Callback function to set field value.
-   */
-  setValue: (value: SetStateAction<string>) => void;
-  /**
-   * Field incremental values that are valid.
-   */
-  step?: number | string;
-  /**
-   * Field type. Default: text.
-   */
-  type: FieldType;
-  /**
-   * Field value.
-   */
-  value: string;
-};
-
-const FieldWithRef: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
-  { className = '', setValue, type, ...props },
-  ref
-) => {
-  /**
-   * Update select value when an option is selected.
-   * @param e - The option change event.
-   */
-  const updateValue = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setValue(e.target.value);
-  };
-
-  return type === 'textarea' ? (
-    <textarea
-      {...props}
-      className={`${styles.field} ${styles['field--textarea']} ${className}`}
-      onChange={updateValue}
-    />
-  ) : (
-    <input
-      {...props}
-      className={`${styles.field} ${className}`}
-      onChange={updateValue}
-      ref={ref}
-      type={type}
-    />
-  );
-};
-
-/**
- * Field component.
- *
- * Render either an input or a textarea.
- */
-export const Field = forwardRef(FieldWithRef);
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.module.scss b/src/components/atoms/forms/fields/boolean-field/boolean-field.module.scss
new file mode 100644
index 0000000..7e13e43
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.module.scss
@@ -0,0 +1,7 @@
+@use "../../../../../styles/abstracts/mixins" as mix;
+
+.field {
+  &--hidden {
+    @include mix.visually-hidden;
+  }
+}
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
new file mode 100644
index 0000000..cb017da
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx
@@ -0,0 +1,175 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { BooleanField } from './boolean-field';
+
+/**
+ * BooleanField - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms/Fields',
+  component: BooleanField,
+  args: {
+    isHidden: false,
+  },
+  argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'The field id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    isChecked: {
+      control: {
+        type: null,
+      },
+      description: 'The field state: true if checked.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    isHidden: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Define if the field should be visually hidden.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: 'The field name.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    onChange: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to handle field state change.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    onClick: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to handle click on field.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      description: 'The field type. Either checkbox or radio.',
+      options: ['checkbox', 'radio'],
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+      description: 'The field value.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof BooleanField>;
+
+const Template: ComponentStory<typeof BooleanField> = ({
+  isChecked: checked,
+  onChange: _onChange,
+  ...args
+}) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  return (
+    <BooleanField
+      isChecked={isChecked}
+      onChange={() => {
+        setIsChecked(!isChecked);
+      }}
+      {...args}
+    />
+  );
+};
+
+/**
+ * Checkbox Story
+ */
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  id: 'checkbox',
+  isChecked: false,
+  name: 'checkbox',
+  type: 'checkbox',
+  value: 'checkbox',
+};
+
+/**
+ * Radio Story
+ */
+export const Radio = Template.bind({});
+Radio.args = {
+  id: 'radio',
+  isChecked: false,
+  name: 'radio',
+  type: 'radio',
+  value: 'radio',
+};
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
new file mode 100644
index 0000000..fcd15ad
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { BooleanField } from './boolean-field';
+
+const handleChange = () => {
+  /**
+   * Do nothing.
+   */
+};
+
+describe('boolean field', () => {
+  it('renders a checkbox', () => {
+    render(
+      <BooleanField
+        id="checkbox"
+        name="checkbox"
+        onChange={handleChange}
+        type="checkbox"
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('renders a radio button', () => {
+    render(
+      <BooleanField
+        id="radio"
+        name="radio"
+        onChange={handleChange}
+        type="radio"
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
new file mode 100644
index 0000000..7985c0b
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
@@ -0,0 +1,86 @@
+import { FC, InputHTMLAttributes } from 'react';
+import styles from './boolean-field.module.scss';
+
+export type BooleanFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | 'checked'
+  | 'disabled'
+  | 'hidden'
+  | 'name'
+  | 'readOnly'
+  | 'required'
+  | 'type'
+  | 'value'
+> & {
+  /**
+   * Should the field be checked?
+   *
+   * @default false
+   */
+  isChecked?: boolean;
+  /**
+   * Should the field be disabled?
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Should the field be visually hidden?
+   *
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Should the field be readonly?
+   *
+   * @default false
+   */
+  isReadOnly?: boolean;
+  /**
+   * Should the field be required?
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * Field name attribute.
+   */
+  name: string;
+  /**
+   * The input type.
+   */
+  type: 'checkbox' | 'radio';
+  /**
+   * Field name attribute.
+   */
+  value: string;
+};
+
+/**
+ * BooleanField component
+ *
+ * Render a checkbox or a radio input type.
+ */
+export const BooleanField: FC<BooleanFieldProps> = ({
+  className = '',
+  isChecked = false,
+  isDisabled = false,
+  isHidden = false,
+  isReadOnly = false,
+  isRequired = false,
+  ...props
+}) => {
+  const visibilityClass = isHidden ? styles['field--hidden'] : '';
+  const inputClass = `${visibilityClass} ${className}`;
+
+  return (
+    <input
+      {...props}
+      checked={isChecked}
+      className={inputClass}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      required={isRequired}
+    />
+  );
+};
diff --git a/src/components/atoms/forms/fields/boolean-field/index.ts b/src/components/atoms/forms/fields/boolean-field/index.ts
new file mode 100644
index 0000000..a49d77b
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/index.ts
@@ -0,0 +1 @@
+export * from './boolean-field';
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
new file mode 100644
index 0000000..658799a
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { Checkbox } from './checkbox';
+
+const doNothing = () => {
+  // Do nothing
+};
+
+describe('Checkbox', () => {
+  it('renders an unchecked checkbox', () => {
+    render(
+      <Checkbox
+        id="checkbox"
+        name="checkbox"
+        onChange={doNothing}
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  it('renders a checked checkbox', () => {
+    render(
+      <Checkbox
+        id="checkbox"
+        isChecked
+        name="checkbox"
+        onChange={doNothing}
+        value="checkbox"
+      />
+    );
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+});
diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
new file mode 100644
index 0000000..2ac3809
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { BooleanField, BooleanFieldProps } from '../boolean-field';
+
+export type CheckboxProps = Omit<BooleanFieldProps, 'type'>;
+
+/**
+ * Checkbox component
+ *
+ * Render a checkbox input type.
+ */
+export const Checkbox: FC<CheckboxProps> = (props) => (
+  <BooleanField {...props} type="checkbox" />
+);
diff --git a/src/components/atoms/forms/fields/checkbox/index.ts b/src/components/atoms/forms/fields/checkbox/index.ts
new file mode 100644
index 0000000..8d78b3e
--- /dev/null
+++ b/src/components/atoms/forms/fields/checkbox/index.ts
@@ -0,0 +1 @@
+export * from './checkbox';
diff --git a/src/components/atoms/forms/fields/fields.module.scss b/src/components/atoms/forms/fields/fields.module.scss
new file mode 100644
index 0000000..f09117d
--- /dev/null
+++ b/src/components/atoms/forms/fields/fields.module.scss
@@ -0,0 +1,50 @@
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/mixins" as mix;
+
+.field {
+  width: 100%;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  background: var(--color-bg-tertiary);
+  border: fun.convert-px(2) solid var(--color-border);
+  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
+  transition: all 0.25s linear 0s;
+
+  &--select {
+    cursor: pointer;
+
+    @include mix.pointer("fine") {
+      padding: fun.convert-px(3) var(--spacing-xs);
+    }
+  }
+
+  &--textarea {
+    min-height: fun.convert-px(200);
+  }
+
+  &:disabled {
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(2) solid var(--color-border-light);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
+      var(--color-shadow-light);
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
+        var(--color-shadow);
+      transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
+    }
+
+    &:focus {
+      background: var(--color-bg);
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 0 var(--color-shadow);
+      transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
+      outline: none;
+      transition:
+        all 0.2s ease-in-out 0s,
+        transform 0.3s ease-out 0s;
+    }
+  }
+}
diff --git a/src/components/atoms/forms/fields/index.ts b/src/components/atoms/forms/fields/index.ts
new file mode 100644
index 0000000..7fafba1
--- /dev/null
+++ b/src/components/atoms/forms/fields/index.ts
@@ -0,0 +1,6 @@
+export * from './boolean-field';
+export * from './checkbox';
+export * from './input';
+export * from './radio';
+export * from './select';
+export * from './text-area';
diff --git a/src/components/atoms/forms/fields/input/index.ts b/src/components/atoms/forms/fields/input/index.ts
new file mode 100644
index 0000000..e3365cb
--- /dev/null
+++ b/src/components/atoms/forms/fields/input/index.ts
@@ -0,0 +1 @@
+export * from './input';
diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx
new file mode 100644
index 0000000..35657f8
--- /dev/null
+++ b/src/components/atoms/forms/fields/input/input.stories.tsx
@@ -0,0 +1,237 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChangeEvent, useCallback, useState } from 'react';
+import { Input } from './input';
+
+/**
+ * Input - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms/Fields',
+  component: Input,
+  args: {
+    isDisabled: false,
+    isRequired: false,
+  },
+  argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'Input id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Input state: either enabled or disabled.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    isRequired: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the field is required.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    max: {
+      control: {
+        type: 'number',
+      },
+      description: 'Maximum value.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    min: {
+      control: {
+        type: 'number',
+      },
+      description: 'Minimum value.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: 'Input name.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      description: 'A placeholder value.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    step: {
+      control: {
+        type: 'number',
+      },
+      description: 'Input incremental values that are valid.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      description: 'Input type: input type or textarea.',
+      options: [
+        'datetime-local',
+        'email',
+        'number',
+        'search',
+        'tel',
+        'text',
+        'textarea',
+        'time',
+        'url',
+      ],
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    value: {
+      control: {
+        type: null,
+      },
+      description: 'Input value.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = ({
+  value: initialValue,
+  onChange: _onChange,
+  ...args
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }, []);
+
+  return <Input value={value} onChange={updateValue} {...args} />;
+};
+
+/**
+ * Input Story - DateTime
+ */
+export const DateTime = Template.bind({});
+DateTime.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'datetime-local',
+};
+
+/**
+ * Input Story - Email
+ */
+export const Email = Template.bind({});
+Email.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'email',
+};
+
+/**
+ * Input Story - Numeric
+ */
+export const Numeric = Template.bind({});
+Numeric.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'number',
+};
+
+/**
+ * Input Story - Text
+ */
+export const Text = Template.bind({});
+Text.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'text',
+};
+
+/**
+ * Input Story - Time
+ */
+export const Time = Template.bind({});
+Time.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+  type: 'time',
+};
diff --git a/src/components/atoms/forms/fields/input/input.test.tsx b/src/components/atoms/forms/fields/input/input.test.tsx
new file mode 100644
index 0000000..1692c9e
--- /dev/null
+++ b/src/components/atoms/forms/fields/input/input.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { Input } from './input';
+
+const doNothing = () => {
+  // do nothing
+};
+
+describe('Input', () => {
+  it('renders a text input', () => {
+    render(
+      <Input
+        id="text-field"
+        name="text-field"
+        onChange={doNothing}
+        type="text"
+        value=""
+      />
+    );
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+  });
+
+  it('renders a search input', () => {
+    render(
+      <Input
+        id="search-field"
+        name="search-field"
+        onChange={doNothing}
+        type="search"
+        value=""
+      />
+    );
+    expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search');
+  });
+});
diff --git a/src/components/atoms/forms/fields/input/input.tsx b/src/components/atoms/forms/fields/input/input.tsx
new file mode 100644
index 0000000..0f0736c
--- /dev/null
+++ b/src/components/atoms/forms/fields/input/input.tsx
@@ -0,0 +1,72 @@
+import {
+  type ForwardedRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  type HTMLInputTypeAttribute,
+} from 'react';
+import styles from '../fields.module.scss';
+
+export type InputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'disabled' | 'hidden' | 'readonly' | 'required' | 'type'
+> &
+  Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>> & {
+    /**
+     * Should the field be disabled?
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the field be hidden?
+     *
+     * @default false
+     */
+    isHidden?: boolean;
+    /**
+     * Should the field be readonly?
+     *
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the field be required?
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The input type.
+     */
+    type: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'range'>;
+  };
+
+const InputWithRef = (
+  {
+    className = '',
+    isDisabled = false,
+    isHidden = false,
+    isReadOnly = false,
+    isRequired = false,
+    ...props
+  }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  const fieldClassName = `${styles.field} ${className}`;
+
+  return (
+    <input
+      {...props}
+      className={fieldClassName}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      ref={ref}
+      required={isRequired}
+    />
+  );
+};
+
+/**
+ * Input component.
+ */
+export const Input = forwardRef(InputWithRef);
diff --git a/src/components/atoms/forms/fields/radio/index.ts b/src/components/atoms/forms/fields/radio/index.ts
new file mode 100644
index 0000000..1140e08
--- /dev/null
+++ b/src/components/atoms/forms/fields/radio/index.ts
@@ -0,0 +1 @@
+export * from './radio';
diff --git a/src/components/atoms/forms/fields/radio/radio.test.tsx b/src/components/atoms/forms/fields/radio/radio.test.tsx
new file mode 100644
index 0000000..42df991
--- /dev/null
+++ b/src/components/atoms/forms/fields/radio/radio.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { Radio } from './radio';
+
+const doNothing = () => {
+  // Do nothing
+};
+
+describe('Radio', () => {
+  it('renders an unchecked radio', () => {
+    render(
+      <Radio id="radio" name="radio" onChange={doNothing} value="radio" />
+    );
+    expect(screen.getByRole('radio')).not.toBeChecked();
+  });
+
+  it('renders a checked radio', () => {
+    render(
+      <Radio
+        id="radio"
+        isChecked
+        name="radio"
+        onChange={doNothing}
+        value="radio"
+      />
+    );
+    expect(screen.getByRole('radio')).toBeChecked();
+  });
+});
diff --git a/src/components/atoms/forms/fields/radio/radio.tsx b/src/components/atoms/forms/fields/radio/radio.tsx
new file mode 100644
index 0000000..6430b4a
--- /dev/null
+++ b/src/components/atoms/forms/fields/radio/radio.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { BooleanField, BooleanFieldProps } from '../boolean-field';
+
+export type RadioProps = Omit<BooleanFieldProps, 'type'>;
+
+/**
+ * Radio component
+ *
+ * Render a radio input type.
+ */
+export const Radio: FC<RadioProps> = (props) => (
+  <BooleanField {...props} type="radio" />
+);
diff --git a/src/components/atoms/forms/fields/select/index.ts b/src/components/atoms/forms/fields/select/index.ts
new file mode 100644
index 0000000..c739673
--- /dev/null
+++ b/src/components/atoms/forms/fields/select/index.ts
@@ -0,0 +1 @@
+export * from './select';
diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx
new file mode 100644
index 0000000..c9e02d2
--- /dev/null
+++ b/src/components/atoms/forms/fields/select/select.stories.tsx
@@ -0,0 +1,143 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChangeEvent, useCallback, useState } from 'react';
+import { Select as SelectComponent } from './select';
+
+const selectOptions = [
+  { id: 'option1', name: 'Option 1', value: 'option1' },
+  { id: 'option2', name: 'Option 2', value: 'option2' },
+  { id: 'option3', name: 'Option 3', value: 'option3' },
+];
+
+/**
+ * Select - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms/Fields',
+  component: SelectComponent,
+  args: {
+    isDisabled: false,
+    isRequired: false,
+  },
+  argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the select field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add classnames to the select field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Field state: either enabled or disabled.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    isRequired: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the field is required.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field name.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    options: {
+      description: 'Select options.',
+      type: {
+        name: 'array',
+        required: true,
+        value: {
+          name: 'string',
+        },
+      },
+    },
+    value: {
+      control: {
+        type: null,
+      },
+      description: 'Field value.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof SelectComponent>;
+
+const Template: ComponentStory<typeof SelectComponent> = ({
+  onChange: _onChange,
+  value,
+  ...args
+}) => {
+  const [selected, setSelected] = useState(value);
+  const updateSelection = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
+    setSelected(e.target.value);
+  }, []);
+
+  return (
+    <SelectComponent {...args} onChange={updateSelection} value={selected} />
+  );
+};
+
+/**
+ * Select Story
+ */
+export const Select = Template.bind({});
+Select.args = {
+  id: 'storybook-select',
+  name: 'storybook-select',
+  options: selectOptions,
+  value: 'option2',
+};
diff --git a/src/components/atoms/forms/fields/select/select.test.tsx b/src/components/atoms/forms/fields/select/select.test.tsx
new file mode 100644
index 0000000..088cc9e
--- /dev/null
+++ b/src/components/atoms/forms/fields/select/select.test.tsx
@@ -0,0 +1,43 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { Select } from './select';
+
+const doNothing = () => {
+  // do nothing
+};
+
+const selectOptions = [
+  { id: 'option1', name: 'Option 1', value: 'option1' },
+  { id: 'option2', name: 'Option 2', value: 'option2' },
+  { id: 'option3', name: 'Option 3', value: 'option3' },
+];
+const selected = selectOptions[0];
+
+describe('Select', () => {
+  it('should correctly set default option', () => {
+    render(
+      <Select
+        id="select-1"
+        name="select-1"
+        onChange={doNothing}
+        options={selectOptions}
+        value={selected.value}
+      />
+    );
+
+    expect(screen.getByRole('combobox')).toHaveValue(selected.value);
+  });
+
+  it('renders the select options', () => {
+    render(
+      <Select
+        id="select-2"
+        name="select-2"
+        onChange={doNothing}
+        options={selectOptions}
+        value={selected.value}
+      />
+    );
+
+    expect(screen.getAllByRole('option')).toHaveLength(selectOptions.length);
+  });
+});
diff --git a/src/components/atoms/forms/fields/select/select.tsx b/src/components/atoms/forms/fields/select/select.tsx
new file mode 100644
index 0000000..887dacc
--- /dev/null
+++ b/src/components/atoms/forms/fields/select/select.tsx
@@ -0,0 +1,76 @@
+import { FC, SelectHTMLAttributes } from 'react';
+import styles from '../fields.module.scss';
+
+export type SelectOptions = {
+  /**
+   * The option id.
+   */
+  id: string;
+  /**
+   * The option name.
+   */
+  name: string;
+  /**
+   * The option value.
+   */
+  value: string;
+};
+
+export type SelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'disabled' | 'hidden' | 'required'
+> & {
+  /**
+   * Should the select field be disabled?
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Should the select field be hidden?
+   *
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Is the select field required?
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * True if the field is required. Default: false.
+   */
+  options: SelectOptions[];
+};
+
+/**
+ * Select component
+ *
+ * Render a HTML select element.
+ */
+export const Select: FC<SelectProps> = ({
+  className = '',
+  isDisabled = false,
+  isHidden = false,
+  isRequired = false,
+  options,
+  ...props
+}) => {
+  const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
+
+  return (
+    <select
+      {...props}
+      className={selectClass}
+      disabled={isDisabled}
+      required={isRequired}
+    >
+      {options.map((option) => (
+        <option key={option.id} id={option.id} value={option.value}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+  );
+};
diff --git a/src/components/atoms/forms/fields/text-area/index.ts b/src/components/atoms/forms/fields/text-area/index.ts
new file mode 100644
index 0000000..e18b325
--- /dev/null
+++ b/src/components/atoms/forms/fields/text-area/index.ts
@@ -0,0 +1 @@
+export * from './text-area';
diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
new file mode 100644
index 0000000..2e77cb7
--- /dev/null
+++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx
@@ -0,0 +1,136 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChangeEvent, useCallback, useState } from 'react';
+import { TextArea as TextAreaComponent } from './text-area';
+
+/**
+ * TextArea - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms/Fields',
+  component: TextAreaComponent,
+  args: {
+    isDisabled: false,
+    isRequired: false,
+  },
+  argTypes: {
+    'aria-labelledby': {
+      control: {
+        type: 'text',
+      },
+      description: 'One or more ids that refers to the field name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add classnames to the field.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'TextArea id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'TextArea state: either enabled or disabled.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    isRequired: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the field is required.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: 'TextArea name.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      description: 'A placeholder value.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    value: {
+      control: {
+        type: null,
+      },
+      description: 'TextArea value.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof TextAreaComponent>;
+
+const Template: ComponentStory<typeof TextAreaComponent> = ({
+  value: initialValue,
+  onChange: _onChange,
+  ...args
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const updateValue = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  }, []);
+
+  return <TextAreaComponent value={value} onChange={updateValue} {...args} />;
+};
+
+/**
+ * TextArea Story - TextArea
+ */
+export const TextArea = Template.bind({});
+TextArea.args = {
+  id: 'field-storybook',
+  name: 'field-storybook',
+};
diff --git a/src/components/atoms/forms/fields/text-area/text-area.test.tsx b/src/components/atoms/forms/fields/text-area/text-area.test.tsx
new file mode 100644
index 0000000..37a1d1c
--- /dev/null
+++ b/src/components/atoms/forms/fields/text-area/text-area.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '../../../../../../tests/utils';
+import { TextArea } from './text-area';
+
+const doNothing = () => {
+  // do nothing
+};
+
+describe('TextArea', () => {
+  it('renders a textarea', () => {
+    render(
+      <TextArea
+        id="textarea-field"
+        name="textarea-field"
+        onChange={doNothing}
+        value=""
+      />
+    );
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/forms/fields/text-area/text-area.tsx b/src/components/atoms/forms/fields/text-area/text-area.tsx
new file mode 100644
index 0000000..bd99d7d
--- /dev/null
+++ b/src/components/atoms/forms/fields/text-area/text-area.tsx
@@ -0,0 +1,69 @@
+import {
+  type ForwardedRef,
+  forwardRef,
+  type TextareaHTMLAttributes,
+} from 'react';
+import styles from '../fields.module.scss';
+
+type AllowedTextAreaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'disabled' | 'readOnly' | 'required'
+> &
+  Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'name'>>;
+
+export type TextAreaProps = AllowedTextAreaProps & {
+  /**
+   * Should the field be disabled?
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Should the field be hidden?
+   *
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Should the field be readonly?
+   *
+   * @default false
+   */
+  isReadOnly?: boolean;
+  /**
+   * Should the field be required?
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+};
+
+const TextAreaWithRef = (
+  {
+    className = '',
+    isDisabled = false,
+    isHidden = false,
+    isReadOnly = false,
+    isRequired = false,
+    ...props
+  }: TextAreaProps,
+  ref: ForwardedRef<HTMLTextAreaElement>
+) => {
+  const fieldClassName = `${styles.field} ${styles['field--textarea']} ${className}`;
+
+  return (
+    <textarea
+      {...props}
+      className={fieldClassName}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      ref={ref}
+      required={isRequired}
+    />
+  );
+};
+
+/**
+ * TextArea component.
+ */
+export const TextArea = forwardRef(TextAreaWithRef);
diff --git a/src/components/atoms/forms/fieldset/fieldset.module.scss b/src/components/atoms/forms/fieldset/fieldset.module.scss
new file mode 100644
index 0000000..ed545a7
--- /dev/null
+++ b/src/components/atoms/forms/fieldset/fieldset.module.scss
@@ -0,0 +1,17 @@
+.fieldset {
+  display: flex;
+  gap: var(--spacing-2xs);
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  &--inline {
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  &--stack {
+    flex-flow: column wrap;
+  }
+}
diff --git a/src/components/atoms/forms/fieldset/fieldset.stories.tsx b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
new file mode 100644
index 0000000..faf355f
--- /dev/null
+++ b/src/components/atoms/forms/fieldset/fieldset.stories.tsx
@@ -0,0 +1,63 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Fieldset as FieldsetComponent } from './fieldset';
+import { Input } from '../fields';
+import { Legend } from '../legend';
+
+/**
+ * Fieldset - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms',
+  component: FieldsetComponent,
+  args: {
+    isDisabled: false,
+  },
+  argTypes: {
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Define if the fields inside the fieldset should be disabled.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof FieldsetComponent>;
+
+const Template: ComponentStory<typeof FieldsetComponent> = (args) => {
+  return (
+    <FieldsetComponent {...args}>
+      <div>
+        <Input
+          aria-label="A field example"
+          id="field1"
+          name="field1"
+          type="text"
+        />
+      </div>
+      <div>
+        <Input
+          aria-label="Another field example"
+          id="field2"
+          name="field2"
+          type="text"
+        />
+      </div>
+    </FieldsetComponent>
+  );
+};
+
+/**
+ * Fieldset Story
+ */
+export const Fieldset = Template.bind({});
+Fieldset.args = {
+  legend: <Legend>The fieldset legend</Legend>,
+};
diff --git a/src/components/atoms/forms/fieldset/fieldset.test.tsx b/src/components/atoms/forms/fieldset/fieldset.test.tsx
new file mode 100644
index 0000000..08a0aaa
--- /dev/null
+++ b/src/components/atoms/forms/fieldset/fieldset.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Input } from '../fields';
+import { Fieldset } from './fieldset';
+
+describe('fieldset', () => {
+  it('renders a fieldset', () => {
+    render(
+      <Fieldset>
+        <Input
+          aria-label="A field example"
+          id="field"
+          name="field"
+          type="text"
+        />
+      </Fieldset>
+    );
+    expect(screen.getByRole('group')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).not.toBeDisabled();
+  });
+
+  it('renders a disabled fieldset', () => {
+    render(
+      <Fieldset isDisabled>
+        <Input
+          aria-label="A field example"
+          id="field"
+          name="field"
+          type="text"
+        />
+      </Fieldset>
+    );
+    expect(screen.getByRole('group')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+});
diff --git a/src/components/atoms/forms/fieldset/fieldset.tsx b/src/components/atoms/forms/fieldset/fieldset.tsx
new file mode 100644
index 0000000..eb42961
--- /dev/null
+++ b/src/components/atoms/forms/fieldset/fieldset.tsx
@@ -0,0 +1,68 @@
+import {
+  forwardRef,
+  type FieldsetHTMLAttributes,
+  ForwardRefRenderFunction,
+  ReactElement,
+} from 'react';
+import styles from './fieldset.module.scss';
+import { LegendProps } from '../legend';
+
+export type FieldsetProps = Omit<
+  FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  'disabled' | 'hidden'
+> & {
+  /**
+   * Should the fieldset be disabled?
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Should the fieldset contents be inlined?
+   *
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * The fieldset legend.
+   */
+  legend?: ReactElement<LegendProps>;
+};
+
+/**
+ * Fieldset component.
+ */
+const FieldsetWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  FieldsetProps
+> = (
+  {
+    children,
+    className = '',
+    isDisabled = false,
+    isInline = false,
+    legend,
+    ...props
+  },
+  ref
+) => {
+  const layoutModifier = isInline
+    ? styles['fieldset--inline']
+    : styles['fieldset--stack'];
+  const legendModifier = legend ? styles['fieldset--has-legend'] : '';
+  const fieldsetClass = `${styles.fieldset} ${legendModifier} ${layoutModifier} ${className}`;
+
+  return (
+    <fieldset
+      {...props}
+      className={fieldsetClass}
+      disabled={isDisabled}
+      ref={ref}
+    >
+      {legend}
+      {children}
+    </fieldset>
+  );
+};
+
+export const Fieldset = forwardRef(FieldsetWithRef);
diff --git a/src/components/atoms/forms/fieldset/index.ts b/src/components/atoms/forms/fieldset/index.ts
new file mode 100644
index 0000000..00ef1f8
--- /dev/null
+++ b/src/components/atoms/forms/fieldset/index.ts
@@ -0,0 +1 @@
+export * from './fieldset';
diff --git a/src/components/atoms/forms/form.test.tsx b/src/components/atoms/forms/form.test.tsx
deleted file mode 100644
index b040665..0000000
--- a/src/components/atoms/forms/form.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Form } from './form';
-
-describe('Form', () => {
-  it('renders a form', () => {
-    render(
-      <Form aria-label="Jest form" onSubmit={() => null}>
-        Fields
-      </Form>
-    );
-    expect(screen.getByRole('form', { name: 'Jest form' })).toBeInTheDocument();
-  });
-});
diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
deleted file mode 100644
index 85ff8fd..0000000
--- a/src/components/atoms/forms/form.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-  Children,
-  FC,
-  FormEvent,
-  FormHTMLAttributes,
-  Fragment,
-  ReactNode,
-} from 'react';
-import styles from './forms.module.scss';
-
-export type FormProps = Omit<
-  FormHTMLAttributes<HTMLFormElement>,
-  'onSubmit'
-> & {
-  /**
-   * The form body.
-   */
-  children: ReactNode;
-  /**
-   * Wrap each items with a div. Default: true.
-   */
-  grouped?: boolean;
-  /**
-   * If grouped, set additional classnames to the items wrapper.
-   */
-  itemsClassName?: string;
-  /**
-   * A callback function to execute on submit.
-   */
-  onSubmit: () => void;
-};
-
-/**
- * Form component.
- *
- * Render children wrapped in a form element.
- */
-export const Form: FC<FormProps> = ({
-  children,
-  grouped = true,
-  itemsClassName = '',
-  onSubmit,
-  ...props
-}) => {
-  const arrayChildren = Children.toArray(children);
-
-  /**
-   * Get the form items.
-   * @returns {JSX.Element[]} An array of child elements wrapped in a div.
-   */
-  const getFormItems = (): JSX.Element[] => {
-    return arrayChildren.map((child, index) =>
-      grouped ? (
-        <div
-          key={`item-${index}`}
-          className={`${styles.item} ${itemsClassName}`}
-        >
-          {child}
-        </div>
-      ) : (
-        <Fragment key={`item-${index}`}>{child}</Fragment>
-      )
-    );
-  };
-
-  /**
-   * Handle form submit.
-   * @param {FormEvent} e - The form event.
-   */
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
-  return (
-    <form {...props} onSubmit={handleSubmit}>
-      {getFormItems()}
-    </form>
-  );
-};
diff --git a/src/components/atoms/forms/form/form.test.tsx b/src/components/atoms/forms/form/form.test.tsx
new file mode 100644
index 0000000..08165f5
--- /dev/null
+++ b/src/components/atoms/forms/form/form.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Form } from './form';
+
+describe('Form', () => {
+  it('renders a form', () => {
+    render(
+      <Form aria-label="A form name" onSubmit={() => null}>
+        Fields
+      </Form>
+    );
+    expect(screen.getByRole('form')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/forms/form/form.tsx b/src/components/atoms/forms/form/form.tsx
new file mode 100644
index 0000000..86481d2
--- /dev/null
+++ b/src/components/atoms/forms/form/form.tsx
@@ -0,0 +1,28 @@
+import {
+  type FormHTMLAttributes,
+  forwardRef,
+  type ForwardRefRenderFunction,
+} from 'react';
+
+export type FormRole = 'form' | 'search' | 'none' | 'presentation';
+
+export type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+  /**
+   * An accessible role.
+   */
+  role?: FormRole;
+};
+
+const FormWithRef: ForwardRefRenderFunction<HTMLFormElement, FormProps> = (
+  { children, ...props },
+  ref
+) => (
+  <form {...props} ref={ref}>
+    {children}
+  </form>
+);
+
+/**
+ * Form component.
+ */
+export const Form = forwardRef(FormWithRef);
diff --git a/src/components/atoms/forms/form/index.ts b/src/components/atoms/forms/form/index.ts
new file mode 100644
index 0000000..698d687
--- /dev/null
+++ b/src/components/atoms/forms/form/index.ts
@@ -0,0 +1 @@
+export * from './form';
diff --git a/src/components/atoms/forms/forms.module.scss b/src/components/atoms/forms/forms.module.scss
deleted file mode 100644
index ece26e5..0000000
--- a/src/components/atoms/forms/forms.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.item {
-  margin: var(--spacing-xs) 0;
-  width: 100%;
-  max-width: 45ch;
-}
-
-.field {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
-
-  &--select {
-    cursor: pointer;
-
-    @include mix.pointer("fine") {
-      padding: fun.convert-px(3) var(--spacing-xs);
-    }
-  }
-
-  &--textarea {
-    min-height: fun.convert-px(200);
-  }
-
-  &:disabled {
-    background: var(--color-bg-secondary);
-    border: fun.convert-px(2) solid var(--color-border-light);
-    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
-      var(--color-shadow-light);
-    cursor: not-allowed;
-  }
-
-  &:not(:disabled) {
-    &:hover {
-      box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
-        var(--color-shadow);
-      transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
-    }
-
-    &:focus {
-      background: var(--color-bg);
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 0 var(--color-shadow);
-      transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-      outline: none;
-      transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
-    }
-  }
-}
diff --git a/src/components/atoms/forms/index.ts b/src/components/atoms/forms/index.ts
index 0af138f..7e444c2 100644
--- a/src/components/atoms/forms/index.ts
+++ b/src/components/atoms/forms/index.ts
@@ -1,5 +1,5 @@
-export * from './boolean-field';
-export * from './field';
+export * from './fields';
+export * from './fieldset';
 export * from './form';
 export * from './label';
-export * from './select';
+export * from './legend';
diff --git a/src/components/atoms/forms/label.module.scss b/src/components/atoms/forms/label.module.scss
deleted file mode 100644
index aed1546..0000000
--- a/src/components/atoms/forms/label.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.label {
-  color: var(--color-primary-darker);
-  font-weight: 600;
-  cursor: pointer;
-
-  &--small {
-    font-size: var(--font-size-sm);
-    font-variant: small-caps;
-  }
-
-  &--medium {
-    font-size: var(--font-size-md);
-  }
-}
-
-.required {
-  color: var(--color-secondary);
-}
diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
deleted file mode 100644
index 3adc92a..0000000
--- a/src/components/atoms/forms/label.stories.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Label as LabelComponent } from './label';
-
-/**
- * Label - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: LabelComponent,
-  args: {
-    required: false,
-    size: 'small',
-  },
-  argTypes: {
-    'aria-label': {
-      control: {
-        type: 'text',
-      },
-      description: 'Define an accessible name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the label.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The label body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    htmlFor: {
-      control: {
-        type: 'text',
-      },
-      description: 'The field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Set to true if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      description: 'The label size.',
-      options: ['medium', 'small'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'small' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof LabelComponent>;
-
-const Template: ComponentStory<typeof LabelComponent> = ({
-  children,
-  ...args
-}) => <LabelComponent {...args}>{children}</LabelComponent>;
-
-/**
- * Label Story
- */
-export const Label = Template.bind({});
-Label.args = {
-  children: 'A label',
-};
diff --git a/src/components/atoms/forms/label.test.tsx b/src/components/atoms/forms/label.test.tsx
deleted file mode 100644
index 091737b..0000000
--- a/src/components/atoms/forms/label.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Label } from './label';
-
-describe('Label', () => {
-  it('renders a field label', () => {
-    render(<Label>A label</Label>);
-    expect(screen.getByText('A label')).toBeDefined();
-  });
-});
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
deleted file mode 100644
index 6764579..0000000
--- a/src/components/atoms/forms/label.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FC, LabelHTMLAttributes, ReactNode } from 'react';
-import styles from './label.module.scss';
-
-export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
-  /**
-   * The label body.
-   */
-  children: ReactNode;
-  /**
-   * Is the field required? Default: false.
-   */
-  required?: boolean;
-  /**
-   * The label size. Default: small.
-   */
-  size?: 'medium' | 'small';
-};
-
-/**
- * Label Component
- *
- * Render a HTML label element.
- */
-export const Label: FC<LabelProps> = ({
-  children,
-  className = '',
-  required = false,
-  size = 'small',
-  ...props
-}) => {
-  const sizeClass = styles[`label--${size}`];
-  const labelClass = `${styles.label} ${sizeClass} ${className}`;
-
-  return (
-    <label {...props} className={labelClass}>
-      {children}
-      {required && <span className={styles.required}> *</span>}
-    </label>
-  );
-};
diff --git a/src/components/atoms/forms/label/index.ts b/src/components/atoms/forms/label/index.ts
new file mode 100644
index 0000000..301fbde
--- /dev/null
+++ b/src/components/atoms/forms/label/index.ts
@@ -0,0 +1 @@
+export * from './label';
diff --git a/src/components/atoms/forms/label/label.module.scss b/src/components/atoms/forms/label/label.module.scss
new file mode 100644
index 0000000..21ba9d3
--- /dev/null
+++ b/src/components/atoms/forms/label/label.module.scss
@@ -0,0 +1,18 @@
+.label {
+  color: var(--color-primary-darker);
+  font-weight: 600;
+  cursor: pointer;
+
+  &--sm {
+    font-size: var(--font-size-sm);
+    font-variant: small-caps;
+  }
+
+  &--md {
+    font-size: var(--font-size-md);
+  }
+}
+
+.required {
+  color: var(--color-secondary);
+}
diff --git a/src/components/atoms/forms/label/label.stories.tsx b/src/components/atoms/forms/label/label.stories.tsx
new file mode 100644
index 0000000..8460c45
--- /dev/null
+++ b/src/components/atoms/forms/label/label.stories.tsx
@@ -0,0 +1,119 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Label as LabelComponent } from './label';
+
+/**
+ * Label - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms',
+  component: LabelComponent,
+  args: {
+    isHidden: false,
+    isRequired: false,
+    size: 'sm',
+  },
+  argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'Define an accessible name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Add classnames to the label.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The label body.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      description: 'The field id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    isHidden: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Set to true if the label should be visually hidden.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    isRequired: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Set to true if the field is required.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      description: 'The label size.',
+      options: ['md', 'sm'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'sm' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof LabelComponent>;
+
+const Template: ComponentStory<typeof LabelComponent> = ({
+  children,
+  ...args
+}) => <LabelComponent {...args}>{children}</LabelComponent>;
+
+/**
+ * Label Story
+ */
+export const Label = Template.bind({});
+Label.args = {
+  children: 'A label',
+};
diff --git a/src/components/atoms/forms/label/label.test.tsx b/src/components/atoms/forms/label/label.test.tsx
new file mode 100644
index 0000000..afdbb94
--- /dev/null
+++ b/src/components/atoms/forms/label/label.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Label } from './label';
+
+describe('Label', () => {
+  it('renders a field label', () => {
+    render(<Label>A label</Label>);
+    expect(screen.getByText('A label')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/forms/label/label.tsx b/src/components/atoms/forms/label/label.tsx
new file mode 100644
index 0000000..5087325
--- /dev/null
+++ b/src/components/atoms/forms/label/label.tsx
@@ -0,0 +1,62 @@
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import styles from './label.module.scss';
+
+export type LabelSize = 'md' | 'sm';
+
+export type LabelProps = Omit<
+  LabelHTMLAttributes<HTMLLabelElement>,
+  'hidden' | 'size'
+> & {
+  /**
+   * The label body.
+   */
+  children: ReactNode;
+  /**
+   * Should the label be hidden?
+   *
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Is the field required?
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * The label size.
+   *
+   * @default 'sm'
+   */
+  size?: LabelSize;
+};
+
+/**
+ * Label Component
+ *
+ * Render a HTML label element.
+ */
+export const Label: FC<LabelProps> = ({
+  children,
+  className = '',
+  isHidden = false,
+  isRequired = false,
+  size = 'sm',
+  ...props
+}) => {
+  const visibilityClass = isHidden ? 'screen-reader-text' : '';
+  const sizeClass = styles[`label--${size}`];
+  const labelClass = `${styles.label} ${sizeClass} ${visibilityClass} ${className}`;
+  const requiredSymbol = ' *';
+
+  return (
+    <label {...props} className={labelClass}>
+      {children}
+      {isRequired ? (
+        <span aria-hidden className={styles.required}>
+          {requiredSymbol}
+        </span>
+      ) : null}
+    </label>
+  );
+};
diff --git a/src/components/atoms/forms/legend/index.ts b/src/components/atoms/forms/legend/index.ts
new file mode 100644
index 0000000..a0482ef
--- /dev/null
+++ b/src/components/atoms/forms/legend/index.ts
@@ -0,0 +1 @@
+export * from './legend';
diff --git a/src/components/atoms/forms/legend/legend.module.scss b/src/components/atoms/forms/legend/legend.module.scss
new file mode 100644
index 0000000..705e3fe
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.module.scss
@@ -0,0 +1,6 @@
+.legend {
+  float: left;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-primary-darker);
+}
diff --git a/src/components/atoms/forms/legend/legend.stories.tsx b/src/components/atoms/forms/legend/legend.stories.tsx
new file mode 100644
index 0000000..cda7f09
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.stories.tsx
@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Legend as LegendComponent } from './legend';
+import { Fieldset } from '../fieldset';
+
+/**
+ * Legend - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Forms',
+  component: LegendComponent,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof LegendComponent>;
+
+const Template: ComponentStory<typeof LegendComponent> = (args) => (
+  <Fieldset>
+    <LegendComponent {...args} />
+  </Fieldset>
+);
+
+/**
+ * Legend Story
+ */
+export const Legend = Template.bind({});
+Legend.args = {
+  children: 'A fieldset legend',
+};
diff --git a/src/components/atoms/forms/legend/legend.test.tsx b/src/components/atoms/forms/legend/legend.test.tsx
new file mode 100644
index 0000000..7abb996
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '../../../../../tests/utils';
+import { Fieldset } from '../fieldset';
+import { Legend } from './legend';
+
+describe('legend', () => {
+  it('renders the fieldset legend', () => {
+    const body = 'deserunt';
+
+    render(
+      <Fieldset>
+        <Legend>{body}</Legend>
+      </Fieldset>
+    );
+
+    expect(screen.getByRole('group')).toHaveTextContent(body);
+  });
+});
diff --git a/src/components/atoms/forms/legend/legend.tsx b/src/components/atoms/forms/legend/legend.tsx
new file mode 100644
index 0000000..b517855
--- /dev/null
+++ b/src/components/atoms/forms/legend/legend.tsx
@@ -0,0 +1,21 @@
+import type { FC, HTMLAttributes } from 'react';
+import styles from './legend.module.scss';
+
+export type LegendProps = HTMLAttributes<HTMLLegendElement>;
+
+/**
+ * Legend component.
+ */
+export const Legend: FC<LegendProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  const legendClass = `${styles.legend} ${className}`;
+
+  return (
+    <legend {...props} className={legendClass}>
+      {children}
+    </legend>
+  );
+};
diff --git a/src/components/atoms/forms/select.stories.tsx b/src/components/atoms/forms/select.stories.tsx
deleted file mode 100644
index b98ebed..0000000
--- a/src/components/atoms/forms/select.stories.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { Select as SelectComponent } from './select';
-
-const selectOptions = [
-  { id: 'option1', name: 'Option 1', value: 'option1' },
-  { id: 'option2', name: 'Option 2', value: 'option2' },
-  { id: 'option3', name: 'Option 3', value: 'option3' },
-];
-
-/**
- * Select - Storybook Meta
- */
-export default {
-  title: 'Atoms/Forms',
-  component: SelectComponent,
-  args: {
-    disabled: false,
-    required: false,
-  },
-  argTypes: {
-    'aria-labelledby': {
-      control: {
-        type: 'text',
-      },
-      description: 'One or more ids that refers to the select field name.',
-      table: {
-        category: 'Accessibility',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Add classnames to the select field.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Field state: either enabled or disabled.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field id.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    name: {
-      control: {
-        type: 'text',
-      },
-      description: 'Field name.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    options: {
-      description: 'Select options.',
-      type: {
-        name: 'array',
-        required: true,
-        value: {
-          name: 'string',
-        },
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the field is required.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    setValue: {
-      control: {
-        type: null,
-      },
-      description: 'Callback function to set field value.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: true,
-      },
-    },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'Field value.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof SelectComponent>;
-
-const Template: ComponentStory<typeof SelectComponent> = ({
-  value,
-  setValue: _setValue,
-  ...args
-}) => {
-  const [selected, setSelected] = useState<string>(value);
-
-  return <SelectComponent value={selected} setValue={setSelected} {...args} />;
-};
-
-/**
- * Select Story
- */
-export const Select = Template.bind({});
-Select.args = {
-  id: 'storybook-select',
-  name: 'storybook-select',
-  options: selectOptions,
-  value: 'option2',
-};
diff --git a/src/components/atoms/forms/select.test.tsx b/src/components/atoms/forms/select.test.tsx
deleted file mode 100644
index 53d9b1f..0000000
--- a/src/components/atoms/forms/select.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Select } from './select';
-
-const selectOptions = [
-  { id: 'option1', name: 'Option 1', value: 'option1' },
-  { id: 'option2', name: 'Option 2', value: 'option2' },
-  { id: 'option3', name: 'Option 3', value: 'option3' },
-];
-const selected = selectOptions[0];
-
-describe('Select', () => {
-  it('should correctly set default option', () => {
-    render(
-      <Select
-        id="jest-select"
-        name="jest-select"
-        options={selectOptions}
-        value={selected.value}
-        setValue={() => null}
-      />
-    );
-    expect(screen.getByRole('combobox')).toHaveValue(selected.value);
-    expect(screen.queryByRole('combobox')).not.toHaveValue(
-      selectOptions[1].value
-    );
-    expect(screen.queryByRole('combobox')).not.toHaveValue(
-      selectOptions[2].value
-    );
-  });
-});
diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx
deleted file mode 100644
index 14f85dc..0000000
--- a/src/components/atoms/forms/select.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ChangeEvent, FC, SelectHTMLAttributes, SetStateAction } from 'react';
-import styles from './forms.module.scss';
-
-export type SelectOptions = {
-  /**
-   * The option id.
-   */
-  id: string;
-  /**
-   * The option name.
-   */
-  name: string;
-  /**
-   * The option value.
-   */
-  value: string;
-};
-
-export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
-  /**
-   * Field id attribute.
-   */
-  id: string;
-  /**
-   * Field name attribute.
-   */
-  name: string;
-  /**
-   * True if the field is required. Default: false.
-   */
-  options: SelectOptions[];
-  /**
-   * Callback function to set field value.
-   */
-  setValue: (value: SetStateAction<string>) => void;
-  /**
-   * Field value.
-   */
-  value: string;
-};
-
-/**
- * Select component
- *
- * Render a HTML select element.
- */
-export const Select: FC<SelectProps> = ({
-  className = '',
-  options,
-  setValue,
-  ...props
-}) => {
-  const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
-
-  /**
-   * Update select value when an option is selected.
-   * @param e - The option change event.
-   */
-  const updateValue = (e: ChangeEvent<HTMLSelectElement>) => {
-    setValue(e.target.value);
-  };
-
-  /**
-   * Get the option elements.
-   * @returns {JSX.Element[]} An array of HTML option elements.
-   */
-  const getOptions = (): JSX.Element[] =>
-    options.map((option) => (
-      <option key={option.id} value={option.value}>
-        {option.name}
-      </option>
-    ));
-
-  return (
-    <select {...props} className={selectClass} onChange={updateValue}>
-      {getOptions()}
-    </select>
-  );
-};
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 72b5598..d9cf865 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -7,3 +7,4 @@ export * from './layout';
 export * from './links';
 export * from './lists';
 export * from './loaders';
+export * from './modal';
diff --git a/src/components/atoms/modal/index.ts b/src/components/atoms/modal/index.ts
new file mode 100644
index 0000000..133aa74
--- /dev/null
+++ b/src/components/atoms/modal/index.ts
@@ -0,0 +1 @@
+export * from './modal';
diff --git a/src/components/atoms/modal/modal.module.scss b/src/components/atoms/modal/modal.module.scss
new file mode 100644
index 0000000..6650235
--- /dev/null
+++ b/src/components/atoms/modal/modal.module.scss
@@ -0,0 +1,66 @@
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+
+.modal {
+  position: relative;
+  box-shadow:
+    fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
+      var(--color-shadow),
+    fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
+      fun.convert-px(-0.3) var(--color-shadow),
+    fun.convert-px(4.7) fun.convert-px(4.7) fun.convert-px(8) fun.convert-px(-1)
+      var(--color-shadow);
+
+  &--primary {
+    padding: clamp(var(--spacing-xs), 2.5vw, var(--spacing-md));
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(3) solid;
+    border-image: radial-gradient(
+        ellipse at top,
+        var(--color-primary-lighter) 20%,
+        var(--color-primary) 100%
+      )
+      1;
+
+    .title {
+      margin-bottom: var(--spacing-2xs);
+    }
+
+    @include mix.media("screen") {
+      @include mix.dimensions(null, "sm") {
+        border-left: none;
+        border-right: none;
+      }
+    }
+  }
+
+  &--secondary {
+    padding: clamp(var(--spacing-xs), 2.2vw, var(--spacing-sm));
+    background: var(--color-bg);
+    border: fun.convert-px(2) solid var(--color-primary-dark);
+    border-radius: fun.convert-px(3);
+
+    .title {
+      padding-inline: var(--spacing-xs);
+      background: var(--color-bg);
+      border: fun.convert-px(1) solid var(--color-primary-dark);
+      box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
+      color: var(--color-primary-darker);
+      font-variant: small-caps;
+
+      > * {
+        margin-block: 0;
+      }
+    }
+  }
+
+  &--secondary#{&}--has-title {
+    --title-height: #{fun.convert-px(40)};
+
+    .title {
+      width: fit-content;
+      height: var(--title-height);
+      margin: calc(var(--title-height) * -1) auto var(--spacing-xs);
+    }
+  }
+}
diff --git a/src/components/atoms/modal/modal.stories.tsx b/src/components/atoms/modal/modal.stories.tsx
new file mode 100644
index 0000000..d0c2f0b
--- /dev/null
+++ b/src/components/atoms/modal/modal.stories.tsx
@@ -0,0 +1,59 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Modal } from './modal';
+import { Heading } from '../headings';
+
+/**
+ * Switch - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Modals',
+  component: Modal,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+
+/**
+ * Modal Stories - Primary
+ */
+export const Primary = Template.bind({});
+Primary.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+};
+
+/**
+ * Modal Stories - Primary With Heading
+ */
+export const PrimaryWithHeading = Template.bind({});
+PrimaryWithHeading.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+  heading: <Heading level={3}>Aut provident eum</Heading>,
+};
+
+/**
+ * Modal Stories - Secondary
+ */
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+  kind: 'secondary',
+};
+
+/**
+ * Modal Stories - Secondary with heading
+ */
+export const SecondaryWithHeading = Template.bind({});
+SecondaryWithHeading.args = {
+  children:
+    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
+  heading: (
+    <Heading isFake level={4}>
+      Aut provident eum
+    </Heading>
+  ),
+  kind: 'secondary',
+};
diff --git a/src/components/atoms/modal/modal.test.tsx b/src/components/atoms/modal/modal.test.tsx
new file mode 100644
index 0000000..5f32d02
--- /dev/null
+++ b/src/components/atoms/modal/modal.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '../../../../tests/utils';
+import { Heading } from '../headings';
+import { Modal } from './modal';
+
+const title = 'A custom title';
+const children =
+  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
+
+describe('Modal', () => {
+  it('renders a title', () => {
+    const level = 2;
+
+    render(
+      <Modal heading={<Heading level={level}>{title}</Heading>}>
+        {children}
+      </Modal>
+    );
+    expect(screen.getByRole('heading', { level })).toHaveTextContent(title);
+  });
+
+  it('renders the modal body', () => {
+    render(<Modal>{children}</Modal>);
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/atoms/modal/modal.tsx b/src/components/atoms/modal/modal.tsx
new file mode 100644
index 0000000..78b4f6e
--- /dev/null
+++ b/src/components/atoms/modal/modal.tsx
@@ -0,0 +1,49 @@
+import {
+  ForwardRefRenderFunction,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  forwardRef,
+} from 'react';
+import { HeadingProps } from '../headings';
+import styles from './modal.module.scss';
+
+export type ModalProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The modal body.
+   */
+  children: ReactNode;
+  /**
+   * The modal title.
+   */
+  heading?: ReactElement<HeadingProps>;
+  /**
+   * The modal kind.
+   *
+   * @default 'primary'
+   */
+  kind?: 'primary' | 'secondary';
+};
+
+const ModalWithRef: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  { children, className = '', heading, kind = 'primary', ...props },
+  ref
+) => {
+  const headingModifier = heading ? 'modal--has-title' : '';
+  const kindModifier = `modal--${kind}`;
+  const modalClass = `${styles.modal} ${styles[headingModifier]} ${styles[kindModifier]} ${className}`;
+
+  return (
+    <div {...props} className={modalClass} ref={ref}>
+      {heading ? <div className={styles.title}>{heading}</div> : null}
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Modal component
+ *
+ * Render a modal component.
+ */
+export const Modal = forwardRef(ModalWithRef);
-- 
cgit v1.2.3