diff --git a/.changeset/early-eels-shake.md b/.changeset/early-eels-shake.md
new file mode 100644
index 0000000000..9358627528
--- /dev/null
+++ b/.changeset/early-eels-shake.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): new `InputBox` small variant
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
index fb1bd27aa1..849c54dc15 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './EmailInput.stories';
@@ -8,6 +9,14 @@ const { Default } = composeStories(stories);
 
 describe('[EmailInput Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
index 40116efe15..964a85fade 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx
@@ -27,13 +27,13 @@ export default {
 } as ComponentMeta<typeof EmailInput>;
 
 const Template: ComponentStory<typeof EmailInput> = (args) => (
-  <EmailInput {...args} />
+  <EmailInput aria-label='email' {...args} />
 );
 
 export const Default: ComponentStory<typeof EmailInput> = Template.bind({});
 
 export const WithIconAddon: ComponentStory<typeof EmailInput> = () => (
-  <EmailInput addon={<Icon name='send' size='x20' />} />
+  <EmailInput aria-label='email' addon={<Icon name='send' size='x20' />} />
 );
 
 export const Invalid: ComponentStory<typeof EmailInput> = Template.bind({});
@@ -59,28 +59,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof EmailInput> = () => (
-  <PropsVariationSection
-    component={EmailInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'support@rocket.chat' },
-      'with icon': {
-        addon: <Icon name='at' size='x20' />,
-        value: 'support@rocket.chat',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'email' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={EmailInput}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'email' }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'support@rocket.chat' },
+        'with icon': {
+          addon: <Icon name='at' size='x20' />,
+          value: 'support@rocket.chat',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
new file mode 100644
index 0000000000..f0627fbbda
--- /dev/null
+++ b/packages/fuselage/src/components/EmailInput/__snapshots__/EmailInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[EmailInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="email"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-email rcx-input-box"
+      size="1"
+      type="email"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
index fa45915f2b..12c293dc80 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -1,14 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { InputBox } from '.';
+import * as stories from './InputBox.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[InputBox Component]', () => {
-  it('renders InputBox without crashing', () => {
-    render(<InputBox type='text' />);
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
   });
 
-  it('renders InputBox.Skeleton without crashing', () => {
-    render(<InputBox.Skeleton />);
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
index ff8ba77d15..012ee29523 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
@@ -9,7 +9,7 @@ import {
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Icon, InputBox } from '../..';
+import { Icon, InputBox, Box } from '../..';
 
 export default {
   title: 'Inputs/InputBox',
@@ -34,7 +34,7 @@ export default {
 } as ComponentMeta<typeof Icon>;
 
 const Template: ComponentStory<typeof InputBox> = (args) => (
-  <InputBox {...args} />
+  <InputBox aria-label='Value' {...args} />
 );
 
 export const Default: ComponentStory<typeof InputBox> = Template.bind({});
@@ -87,3 +87,26 @@ export const Skeleton: ComponentStory<typeof InputBox> = () => (
   <InputBox.Skeleton />
 );
 Skeleton.storyName = 'InputBox.Skeleton';
+
+export const SmallVariants: ComponentStory<typeof InputBox> = () => (
+  <Box
+    display='flex'
+    flexDirection='column'
+    alignItems='flex-start'
+    style={{ gap: '8px' }}
+  >
+    <InputBox type='text' small placeholder='Name' aria-label='Name' />
+    <InputBox
+      type='text'
+      small
+      placeholder='Search'
+      addon={<Icon name='magnifier' size='x20' />}
+      aria-label='Search'
+    />
+  </Box>
+);
+SmallVariants.args = {
+  placeholder: 'Search',
+  small: true,
+  onChange: action('change'),
+};
diff --git a/packages/fuselage/src/components/InputBox/InputBox.styles.scss b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
index f8a8a9ce32..871485ab45 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.styles.scss
+++ b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
@@ -193,6 +193,31 @@
     }
   }
 
+  &__wrapper:has(.rcx-input-box--small) {
+    align-items: center;
+
+    min-width: lengths.size(112);
+    max-height: lengths.size(28);
+    padding: lengths.padding(4) lengths.padding(16);
+  }
+
+  &--small {
+    @include typography.use-font-scale(c1);
+
+    &:not(.rcx-input-box--undecorated) {
+      @extend %input;
+      min-width: lengths.size(112);
+
+      min-height: lengths.size(28);
+      padding: lengths.padding(4) lengths.padding(16);
+
+      &:invalid,
+      &.invalid {
+        @extend %input--invalid;
+      }
+    }
+  }
+
   @include with-colors(
     $color: $input-colors-color,
     $placeholder-color: $input-colors-placeholder-color,
@@ -241,6 +266,10 @@
   .rcx-input-box__wrapper > & {
     width: lengths.size(none);
     min-width: lengths.size(none);
+
+    &--small {
+      padding: lengths.padding(none);
+    }
   }
 }
 
diff --git a/packages/fuselage/src/components/InputBox/InputBox.tsx b/packages/fuselage/src/components/InputBox/InputBox.tsx
index 0345313b60..b7ebc8c3da 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.tsx
@@ -23,6 +23,7 @@ type InputBoxProps = ComponentProps<typeof Box> & {
   error?: string;
   placeholder?: string;
   placeholderVisible?: boolean;
+  small?: boolean;
   type:
     | 'button'
     | 'checkbox'
@@ -69,6 +70,7 @@ export const InputBox = forwardRef(function InputBox(
     multiple,
     placeholderVisible,
     type = 'text',
+    small,
     onChange,
     ...props
   }: InputBoxProps,
@@ -140,6 +142,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--multiple={multiple}
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
+        rcx-input-box--small={small}
         {...props}
       />
     );
@@ -173,6 +176,7 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--placeholder-visible={placeholderVisible}
         rcx-input-box--type={type}
         rcx-input-box--undecorated
+        rcx-input-box--small={small}
         {...props}
       />
       <Addon children={addon} />
diff --git a/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
new file mode 100644
index 0000000000..8842b48a93
--- /dev/null
+++ b/packages/fuselage/src/components/InputBox/__snapshots__/InputBox.spec.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[InputBox Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="Value"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+      value="Value"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
index 88264ab948..5146e5df1d 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { NumberInput } from '.';
+import * as stories from './NumberInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[NumberInput Component]', () => {
   it('renders without crashing', () => {
-    render(<NumberInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
index 03fd7db447..a69a01fbc7 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.stories.tsx
@@ -33,7 +33,7 @@ export default {
 } as ComponentMeta<typeof NumberInput>;
 
 const Template: ComponentStory<typeof NumberInput> = (args) => (
-  <NumberInput {...args} />
+  <NumberInput aria-label='number' {...args} />
 );
 
 export const Default: ComponentStory<typeof NumberInput> = Template.bind({});
@@ -60,25 +60,54 @@ WithPlaceholder.args = {
 };
 
 export const States: ComponentStory<typeof NumberInput> = () => (
-  <PropsVariationSection
-    component={NumberInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 1024 },
-      'with icon': { addon: <Icon name='discover' size='x20' />, value: 1024 },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={NumberInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'number' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 1024 },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 1024,
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={NumberInput}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'number' }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 1024 },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 1024,
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
new file mode 100644
index 0000000000..0e71bc5018
--- /dev/null
+++ b/packages/fuselage/src/components/NumberInput/__snapshots__/NumberInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[NumberInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="number"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-number rcx-input-box"
+      size="1"
+      type="number"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
index d33439159b..6253e6099c 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import PasswordInput from '.';
+import * as stories from './PasswordInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[PasswordInput Component]', () => {
   it('renders without crashing', () => {
-    render(<PasswordInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
index b00d0f399d..815c4b700d 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx
@@ -1,50 +1,84 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Icon, PasswordInput } from '../..';
-import PropsVariation from '../../.storybook/PropsVariation';
+import { PropsVariationSection } from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/PasswordInput',
   component: PasswordInput,
   parameters: { jest: ['PasswordInput.spec.tsx'] },
-};
+} as ComponentMeta<typeof PasswordInput>;
 
-export const Default = () => <PasswordInput />;
+export const Default: ComponentStory<typeof PasswordInput> = () => (
+  <PasswordInput aria-label='password' />
+);
 
-export const WithValue = () => <PasswordInput defaultValue='password' />;
+export const WithValue = () => (
+  <PasswordInput aria-label='password' defaultValue='password' />
+);
 
 export const WithIconAddon = () => (
-  <PasswordInput addon={<Icon name='send' size={20} />} />
+  <PasswordInput aria-label='password' addon={<Icon name='send' size={20} />} />
 );
 
-export const Invalid = () => <PasswordInput error='Error' />;
+export const Invalid = () => (
+  <PasswordInput aria-label='password' error='Error' />
+);
 
-export const Disabled = () => <PasswordInput disabled />;
+export const Disabled = () => <PasswordInput aria-label='password' disabled />;
 
 export const WithPlaceholder = () => (
-  <PasswordInput placeholder='Placeholder' />
+  <PasswordInput aria-label='password' placeholder='Placeholder' />
 );
 
 export const States = () => (
-  <PropsVariation
-    component={PasswordInput}
-    common={{ onChange: () => undefined }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={PasswordInput}
+      common={{ 'onChange': () => undefined, 'aria-label': 'password' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={PasswordInput}
+      common={{
+        'onChange': () => undefined,
+        'small': true,
+        'aria-label': 'password',
+      }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': { addon: <Icon name='key' size='x20' />, value: 'Value' },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
new file mode 100644
index 0000000000..64c9b1847a
--- /dev/null
+++ b/packages/fuselage/src/components/PasswordInput/__snapshots__/PasswordInput.spec.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[PasswordInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <input
+        aria-label="password"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+        size="1"
+        type="password"
+      />
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
index f514dd320f..0a18c85bcb 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { SearchInput } from '.';
+import * as stories from './SearchInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[SearchInput Component]', () => {
   it('renders without crashing', () => {
-    render(<SearchInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
index 1d116af033..d4878cda45 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.stories.tsx
@@ -33,7 +33,7 @@ export default {
 } as ComponentMeta<typeof SearchInput>;
 
 const Template: ComponentStory<typeof SearchInput> = (args) => (
-  <SearchInput {...args} />
+  <SearchInput aria-label='search' {...args} />
 );
 
 export const Default: ComponentStory<typeof SearchInput> = Template.bind({});
@@ -67,28 +67,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof SearchInput> = () => (
-  <PropsVariationSection
-    component={SearchInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': {
-        addon: <Icon name='magnifier' size='x20' />,
-        value: 'Value',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={SearchInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'search' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='magnifier' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={SearchInput}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'search' }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='magnifier' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
new file mode 100644
index 0000000000..9a896795d9
--- /dev/null
+++ b/packages/fuselage/src/components/SearchInput/__snapshots__/SearchInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[SearchInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="search"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-search rcx-input-box"
+      size="1"
+      type="search"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
index 6e2679d42b..5023b304f2 100644
--- a/packages/fuselage/src/components/Select/Select.stories.tsx
+++ b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 
 import type { SelectOption } from '../..';
 import { Select } from '../..';
+import PropsVariationSection from '../../.storybook/PropsVariation';
 
 const options: SelectOption[] = Array.from({
   length: 12,
@@ -36,12 +37,21 @@ export default {
   },
 } as ComponentMeta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+const Template: ComponentStory<typeof Select> = (args) => (
+  <Select aria-label='select' {...args} />
+);
 
 const TemplateControlled: ComponentStory<typeof Select> = (args) => {
   const [value, setValue] = React.useState<React.Key>('3');
 
-  return <Select {...args} value={value} onChange={setValue as any} />;
+  return (
+    <Select
+      aria-label='select'
+      {...args}
+      value={value}
+      onChange={setValue as any}
+    />
+  );
 };
 
 export const Default: ComponentStory<typeof Select> = Template.bind({});
@@ -78,3 +88,33 @@ NoPlaceholder.args = {
   'aria-label': 'No placeholder select',
   options,
 };
+
+export const States = () => (
+  <>
+    <PropsVariationSection
+      component={(props) => (
+        <Select options={options} aria-label='select' {...props} />
+      )}
+      common={{
+        onChange: () => {},
+      }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'small': { small: true },
+        'small with placeholder': { small: true, placeholder: 'Placeholder' },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
+);
diff --git a/packages/fuselage/src/components/Select/Select.tsx b/packages/fuselage/src/components/Select/Select.tsx
index b7db3d1153..1ce753e5e3 100644
--- a/packages/fuselage/src/components/Select/Select.tsx
+++ b/packages/fuselage/src/components/Select/Select.tsx
@@ -16,6 +16,7 @@ type SelectProps<T, V extends Key> = Omit<
   value?: V | null;
   onChange?: ((key: V) => any) | undefined;
   options: SelectOption[];
+  small?: boolean;
 } & Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange'>;
 
 export const Select = forwardRef(function Select<
diff --git a/packages/fuselage/src/components/Select/SelectAria.tsx b/packages/fuselage/src/components/Select/SelectAria.tsx
index 631c85b4b8..1ca961d0ac 100644
--- a/packages/fuselage/src/components/Select/SelectAria.tsx
+++ b/packages/fuselage/src/components/Select/SelectAria.tsx
@@ -26,12 +26,14 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
     placeholder,
     value,
     onChange,
+    small,
     ...props
   }: Omit<AriaSelectProps<T>, 'value' | 'onChange'> & {
     error?: string;
     placeholder?: string;
     value?: Key | null;
     onChange?: ((key: Key) => any) | undefined;
+    small?: boolean;
   } & React.AllHTMLAttributes<HTMLElement>,
   outerRef: Ref<HTMLElement>
 ) {
@@ -55,6 +57,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
   return (
     <>
       <Box
+        {...props}
         disabled={disabled}
         rcx-select
         {...mergeProps(buttonProps, focusProps)}
@@ -64,6 +67,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
         fontScale='p2'
         ref={mergedRef}
         justifyContent='space-between'
+        rcx-input-box--small={small}
         className={[
           error && 'invalid',
           disabled && 'disabled',
@@ -82,6 +86,7 @@ export const SelectAria = forwardRef(function SelectAria<T extends object>(
           is='span'
           {...valueProps}
           color={state.selectedItem ? 'default' : 'hint'}
+          {...(small && { fontScale: 'c1' })}
         >
           {state.selectedItem ? state.selectedItem.rendered : placeholder}
         </Box>
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
index ac32100909..a2758e85b9 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
@@ -1,8 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { SelectInput } from '.';
+import * as stories from './SelectInput.stories';
 
-it('renders without crashing', () => {
-  render(<SelectInput />);
+const { Default } = composeStories(stories);
+
+describe('[SelectInput Component]', () => {
+  it('renders without crashing', () => {
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
index 176adee474..76f106549a 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
@@ -34,7 +34,7 @@ export default {
 } as ComponentMeta<typeof SelectInput>;
 
 const Template: ComponentStory<typeof SelectInput> = (args) => (
-  <SelectInput {...args}>
+  <SelectInput aria-label='select' {...args}>
     <SelectInputOption value='a'>Item A</SelectInputOption>
     <SelectInputOption value='b'>Item B</SelectInputOption>
     <SelectInputOption value='c'>Item C</SelectInputOption>
@@ -83,34 +83,69 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof SelectInput> = () => (
-  <PropsVariationSection
-    component={SelectInput}
-    common={{
-      children: (
-        <>
-          <SelectInputOption value='a'>Item A</SelectInputOption>
-          <SelectInputOption value='b'>Item B</SelectInputOption>
-          <SelectInputOption value='c'>Item C</SelectInputOption>
-        </>
-      ),
-      onChange: () => {},
-    }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'b' },
-      'multiple': { multiple: true, size: 3 },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={SelectInput}
+      common={{
+        'aria-label': 'select',
+        'children': (
+          <>
+            <SelectInputOption value='a'>Item A</SelectInputOption>
+            <SelectInputOption value='b'>Item B</SelectInputOption>
+            <SelectInputOption value='c'>Item C</SelectInputOption>
+          </>
+        ),
+        'onChange': () => {},
+      }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'b' },
+        'multiple': { multiple: true, size: 3 },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={SelectInput}
+      common={{
+        'aria-label': 'select',
+        'children': (
+          <>
+            <SelectInputOption value='a'>Item A</SelectInputOption>
+            <SelectInputOption value='b'>Item B</SelectInputOption>
+            <SelectInputOption value='c'>Item C</SelectInputOption>
+          </>
+        ),
+        'onChange': () => {},
+        'small': true,
+      }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'b' },
+        'multiple': { multiple: true, size: 3 },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
new file mode 100644
index 0000000000..3a89177968
--- /dev/null
+++ b/packages/fuselage/src/components/SelectInput/__snapshots__/SelectInput.spec.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[SelectInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+    >
+      <select
+        aria-label="select"
+        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-select rcx-input-box"
+        size="1"
+      >
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="a"
+        >
+          Item A
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="b"
+        >
+          Item B
+        </option>
+        <option
+          class="rcx-box rcx-box--full rcx-input-box__option"
+          value="c"
+        >
+          Item C
+        </option>
+      </select>
+      <span
+        class="rcx-box rcx-box--full rcx-input-box__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-4pvxx3"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
index 7d5cbe55af..b66857bc7a 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { TelephoneInput } from '.';
+import * as stories from './TelephoneInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[TelephoneInput Component]', () => {
   it('renders without crashing', () => {
-    render(<TelephoneInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
index bc468092b9..9fd60d56c8 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.stories.tsx
@@ -26,7 +26,7 @@ export default {
 } as ComponentMeta<typeof TelephoneInput>;
 
 const Template: ComponentStory<typeof TelephoneInput> = (args) => (
-  <TelephoneInput {...args} />
+  <TelephoneInput aria-label='telephone' {...args} />
 );
 
 export const Default: ComponentStory<typeof TelephoneInput> = Template.bind({});
@@ -57,28 +57,58 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof TelephoneInput> = () => (
-  <PropsVariationSection
-    component={TelephoneInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: '+1234567890' },
-      'with icon': {
-        addon: <Icon name='mobile' size='x20' />,
-        value: '+1234567890',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={TelephoneInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'telephone' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: '+1234567890' },
+        'with icon': {
+          addon: <Icon name='mobile' size='x20' />,
+          value: '+1234567890',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={TelephoneInput}
+      common={{
+        'onChange': () => {},
+        'small': true,
+        'aria-label': 'telephone',
+      }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: '+1234567890' },
+        'with icon': {
+          addon: <Icon name='mobile' size='x20' />,
+          value: '+1234567890',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
new file mode 100644
index 0000000000..e6b540160d
--- /dev/null
+++ b/packages/fuselage/src/components/TelephoneInput/__snapshots__/TelephoneInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[TelephoneInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="telephone"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-tel rcx-input-box"
+      size="1"
+      type="tel"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
index bc9d399891..4d78e3376f 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { TextInput } from '.';
+import * as stories from './TextInput.stories';
 
-describe('[TextInput]', () => {
+const { Default } = composeStories(stories);
+
+describe('[TextInput Component]', () => {
   it('renders without crashing', () => {
-    render(<TextInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
index fa090e2865..88829e6984 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.stories.tsx
@@ -26,7 +26,7 @@ export default {
 } as ComponentMeta<typeof TextInput>;
 
 const Template: ComponentStory<typeof TextInput> = (args) => (
-  <TextInput {...args} />
+  <TextInput aria-label='text' {...args} />
 );
 
 export const Default: ComponentStory<typeof TextInput> = Template.bind({});
@@ -61,28 +61,54 @@ WithValue.args = {
 };
 
 export const States: ComponentStory<typeof TextInput> = () => (
-  <PropsVariationSection
-    component={TextInput}
-    common={{ onChange: () => {} }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'Value' },
-      'with icon': {
-        addon: <Icon name='keyboard' size='x20' />,
-        value: 'Value',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={TextInput}
+      common={{ 'onChange': () => {}, 'aria-label': 'text' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='keyboard' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={TextInput}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'text' }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'Value' },
+        'with icon': {
+          addon: <Icon name='keyboard' size='x20' />,
+          value: 'Value',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
new file mode 100644
index 0000000000..3dee7439fa
--- /dev/null
+++ b/packages/fuselage/src/components/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[TextInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="text"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+      size="1"
+      type="text"
+    />
+  </div>
+</body>
+`;
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
index c86b8a6572..34a1f77195 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
@@ -1,10 +1,22 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import UrlInput from '.';
+import * as stories from './UrlInput.stories';
+
+const { Default } = composeStories(stories);
 
 describe('[UrlInput Component]', () => {
   it('renders without crashing', () => {
-    render(<UrlInput />);
+    const tree = render(<Default />);
+    expect(tree.baseElement).toMatchSnapshot();
+  });
+
+  it('%s should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
   });
 });
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
index 0b9bbed52f..2710a10730 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.stories.tsx
@@ -1,7 +1,8 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Icon, UrlInput } from '../..';
-import PropsVariation from '../../.storybook/PropsVariation';
+import { PropsVariationSection } from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/UrlInput',
@@ -9,45 +10,81 @@ export default {
   parameters: {
     jest: ['UrlInput.spec.tsx'],
   },
-};
+} as ComponentMeta<typeof UrlInput>;
 
-export const Default = () => <UrlInput />;
+export const Default: ComponentStory<typeof UrlInput> = () => (
+  <UrlInput aria-label='url' />
+);
 
 export const WithIconAddon = () => (
-  <UrlInput addon={<Icon name='send' size='x20' />} />
+  <UrlInput aria-label='url' addon={<Icon name='send' size='x20' />} />
 );
 
-export const Invalid = () => <UrlInput error='Error' />;
+export const Invalid = () => <UrlInput aria-label='url' error='Error' />;
 
-export const Disabled = () => <UrlInput disabled />;
+export const Disabled = () => <UrlInput aria-label='url' disabled />;
 
-export const WithPlaceholder = () => <UrlInput placeholder='Placeholder' />;
+export const WithPlaceholder = () => (
+  <UrlInput aria-label='url' placeholder='Placeholder' />
+);
 
-export const WithValue = () => <UrlInput defaultValue='https://rocket.chat' />;
+export const WithValue = () => (
+  <UrlInput aria-label='url' defaultValue='https://rocket.chat' />
+);
 
 export const States = () => (
-  <PropsVariation
-    component={UrlInput}
-    common={{ onChange: () => undefined }}
-    xAxis={{
-      'default': {},
-      'with placeholder': { placeholder: 'Placeholder' },
-      'with value': { value: 'https://rocket.chat' },
-      'with icon': {
-        addon: <Icon name='discover' size='x20' />,
-        value: 'https://rocket.chat',
-      },
-    }}
-    yAxis={{
-      'default': {},
-      'hover': { className: 'hover' },
-      'active': { className: 'active' },
-      'focus': { className: 'focus' },
-      'disabled': { disabled: true },
-      'errored': { error: 'Error' },
-      'errored + hover': { className: 'hover', error: 'Error' },
-      'errored + active': { className: 'active', error: 'Error' },
-      'errored + focus': { className: 'focus', error: 'Error' },
-    }}
-  />
+  <>
+    <PropsVariationSection
+      component={UrlInput}
+      common={{ 'onChange': () => undefined, 'aria-label': 'url' }}
+      xAxis={{
+        'default': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'https://rocket.chat' },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 'https://rocket.chat',
+        },
+      }}
+      yAxis={{
+        'default': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+    <PropsVariationSection
+      component={UrlInput}
+      common={{
+        'onChange': () => undefined,
+        'small': true,
+        'aria-label': 'url',
+      }}
+      xAxis={{
+        'small': {},
+        'with placeholder': { placeholder: 'Placeholder' },
+        'with value': { value: 'https://rocket.chat' },
+        'with icon': {
+          addon: <Icon name='discover' size='x20' />,
+          value: 'https://rocket.chat',
+        },
+      }}
+      yAxis={{
+        'small': {},
+        'hover': { className: 'hover' },
+        'active': { className: 'active' },
+        'focus': { className: 'focus' },
+        'disabled': { disabled: true },
+        'errored': { error: 'Error' },
+        'errored + hover': { className: 'hover', error: 'Error' },
+        'errored + active': { className: 'active', error: 'Error' },
+        'errored + focus': { className: 'focus', error: 'Error' },
+      }}
+    />
+  </>
 );
diff --git a/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
new file mode 100644
index 0000000000..edb66a68d2
--- /dev/null
+++ b/packages/fuselage/src/components/UrlInput/__snapshots__/UrlInput.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[UrlInput Component] renders without crashing 1`] = `
+<body>
+  <div>
+    <input
+      aria-label="url"
+      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-url rcx-input-box"
+      size="1"
+      type="url"
+    />
+  </div>
+</body>
+`;