diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index 2311685f..e19b9260 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -269,3 +269,10 @@ export const ColumnContent = styled.div`
 export const TableContent = styled.div`
   padding: 10px;
 `;
+
+export const Form = styled.form`
+  width: 100%;
+  & > div {
+    margin-bottom: 10px;
+  }
+`;
diff --git a/src/ui/atoms/input/index.tsx b/src/ui/atoms/input/index.tsx
index b8f32c98..f8877175 100644
--- a/src/ui/atoms/input/index.tsx
+++ b/src/ui/atoms/input/index.tsx
@@ -5,6 +5,7 @@ import { Variant } from 'lib/types';
 import { InputContainer, InputElement } from '../../elements/quarks';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  autoComplete?: 'on' | 'off';
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
@@ -17,6 +18,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 const InputBase: React.FC<InputProps & Variant> = ({
+  autoComplete = 'off',
   className,
   disabled = false,
   leftIcon,
@@ -37,6 +39,7 @@ const InputBase: React.FC<InputProps & Variant> = ({
     variant={variant}
   >
     <InputElement
+      autoComplete={autoComplete}
       className={className}
       disabled={disabled}
       name={name}
@@ -49,11 +52,6 @@ const InputBase: React.FC<InputProps & Variant> = ({
 );
 
 export const Input = styled(InputBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-
   box-sizing: border-box;
   width: 100%;
 
diff --git a/src/ui/atoms/input/usage.mdx b/src/ui/atoms/input/usage.mdx
index 9f1c6ecf..cb795bc3 100644
--- a/src/ui/atoms/input/usage.mdx
+++ b/src/ui/atoms/input/usage.mdx
@@ -7,7 +7,7 @@ package: 'woly'
 import { Input } from './index';
 import { InfoIcon } from 'icons';
 
-import { Playground, block, State } from 'box-styles'
+import { Playground, block, State, Form } from 'box-styles'
 
 import { ButtonIcon } from '../../atoms';
 
@@ -54,13 +54,15 @@ Specs:
 ### Example
 
 <Playground>
-  <Input
-    name="name"
-    onChange={(event) => console.info('On input change')}
-    placeholder="Enter your name here"
-    type="text"
-    variant="primary"
-  />
+  <Form autoComplete="false">
+    <Input
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Enter your name here"
+      type="text"
+      variant="primary"
+    />
+  </Form>
 </Playground>
 
 ### Disabled
@@ -68,23 +70,25 @@ Specs:
 Disabled text fields are uneditable. They have less opacity so that they appear less tappable.
 
 <Playground direction="vertical">
-  <Input
-    disabled
-    name="name"
-    onChange={(event) => console.info('On input change')}
-    placeholder="Enter your name here"
-    type="text"
-    variant="primary"
-  />
-  <Input
-    disabled
-    leftIcon={<InfoIcon />}
-    name="name"
-    onChange={(event) => console.info('On input change')}
-    placeholder="Enter your name here"
-    type="text"
-    variant="primary"
-  />
+  <Form autoComplete="false">
+    <Input
+      disabled
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Enter your name here"
+      type="text"
+      variant="primary"
+    />
+    <Input
+      disabled
+      leftIcon={<InfoIcon />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Enter your name here"
+      type="text"
+      variant="primary"
+    />
+  </Form>
 </Playground>
 
 ### Icons
@@ -92,107 +96,117 @@ Disabled text fields are uneditable. They have less opacity so that they appear
 Inputs can be combined with an icon on the left side or the right. Use icons on the both sides is not recommended.
 
 <Playground direction="vertical" size="L">
-  <Input
-    leftIcon={<InfoIcon />}
-    type="text"
-    name="name"
-    placeholder="Enter your name here"
-    variant="primary"
-    onChange={(event) => console.info('On input change')}
-  />
-  <Input
-    type="text"
-    name="name"
-    placeholder="Enter your name here"
-    variant="primary"
-    onChange={(event) => console.info('On input change')}
-    rightIcon={<InfoIcon />}
-  />
-  <Input
-    leftIcon={<InfoIcon />}
-    type="text"
-    name="name"
-    placeholder="Enter your name here"
-    variant="primary"
-    onChange={(event) => console.info('On input change')}
-    rightIcon={<InfoIcon />}
-  />
+  <Form autoComplete="false">
+    <Input
+      leftIcon={<InfoIcon />}
+      type="text"
+      name="name"
+      placeholder="Enter your name here"
+      variant="primary"
+      onChange={(event) => console.info('On input change')}
+    />
+    <Input
+      type="text"
+      name="name"
+      placeholder="Enter your name here"
+      variant="primary"
+      onChange={(event) => console.info('On input change')}
+      rightIcon={<InfoIcon />}
+    />
+    <Input
+      leftIcon={<InfoIcon />}
+      type="text"
+      name="name"
+      placeholder="Enter your name here"
+      variant="primary"
+      onChange={(event) => console.info('On input change')}
+      rightIcon={<InfoIcon />}
+    />
+  </Form>
 </Playground>
 
 Icons can also be touch targets for nested components.
 
 <Playground size="L" direction="vertical">
-  <Input
-    rightIcon={
-      <block.S>
-        <ButtonIcon
-          icon={<InfoIcon />}
-          onClick={() => console.info('ButtonIcon clicked')}
-          variant="primary"
-        />
-      </block.S>
-    }
-    type="text"
-    name="name"
-    placeholder="Enter your name here"
-    onChange={(event) => console.info('On input change')}
-    variant="primary"
-  />
-  <Input
-    leftIcon={<InfoIcon />}
-    type="text"
-    name="name"
-    placeholder="Enter your name here"
-    onChange={(event) => console.info('On input change')}
-    variant="primary"
-    rightIcon={
-      <block.S>
-        <ButtonIcon
-          icon={<InfoIcon />}
-          onClick={() => console.info('ButtonIcon clicked')}
-          variant="primary"
-        />
-      </block.S>
-    }
-  />
+  <Form autoComplete="false">
+    <Input
+      rightIcon={
+        <block.S>
+          <ButtonIcon
+            icon={<InfoIcon />}
+            onClick={() => console.info('ButtonIcon clicked')}
+            variant="primary"
+          />
+        </block.S>
+      }
+      type="text"
+      name="name"
+      placeholder="Enter your name here"
+      onChange={(event) => console.info('On input change')}
+      variant="primary"
+    />
+    <Input
+      leftIcon={<InfoIcon />}
+      type="text"
+      name="name"
+      placeholder="Enter your name here"
+      onChange={(event) => console.info('On input change')}
+      variant="primary"
+      rightIcon={
+        <block.S>
+          <ButtonIcon
+            icon={<InfoIcon />}
+            onClick={() => console.info('ButtonIcon clicked')}
+            variant="primary"
+          />
+        </block.S>
+      }
+    />
+  </Form>
 </Playground>
 
 ### Variants
 
-Primary and danger variants are should be used to focus user attention.
+Primary and secondary variants are should be used to focus user attention.
+
+<!-- example for secondary variant will be fixed with task FRNT-477 -->
 
 <Playground direction="vertical">
-  <Input
-    leftIcon={<InfoIcon />}
-    name="name"
-    onChange={(event) => console.info('On input change')}
-    placeholder="Primary input"
-    type="text"
-    value="Primary"
-    variant="primary"
-  />
-  <Input
-    leftIcon={<InfoIcon />}
-    type="text"
-    name="name"
-    placeholder="Error input"
-    value="Error input"
-    variant="danger"
-    onChange={(event) => console.info('On input change')}
-  />
+  <Form autoComplete="false">
+    <Input
+      leftIcon={<InfoIcon />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Primary input"
+      type="text"
+      value="Primary"
+      variant="primary"
+    />
+    <Input
+      leftIcon={<InfoIcon />}
+      type="text"
+      name="name"
+      value="Secondary"
+      placeholder="Secondary input"
+      variant="secondary"
+      onChange={(event) => console.info('On input change')}
+    />
+  </Form>
 </Playground>
 
-Secondary variant should be used as a default variant.
+Error variant can be used to focus user attention on error.
 
 <Playground>
-  <Input
-    leftIcon={<InfoIcon />}
-    name="name"
-    onChange={(event) => console.info('On input change')}
-    placeholder="Secondary input"
-    variant="secondary"
-    type="text"
-  />
+  <Form autoComplete="false">
+    <Input
+      leftIcon={<InfoIcon />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Error input"
+      type="text"
+      variant="danger"
+    />
+  </Form>
 </Playground>
 
 ### Sizes
@@ -200,70 +214,81 @@ Secondary variant should be used as a default variant.
 Size controlled by the `component-level` block property not from the props.
 
 <Playground direction="vertical">
-  <block.S>
+  <Form autoComplete="false">
     <Input
+      disabled
       name="name"
       onChange={(event) => console.info('On input change')}
       placeholder="Enter your name here"
       type="text"
       variant="primary"
     />
-  </block.S>
-  <block.M>
     <Input
+      disabled
+      leftIcon={<InfoIcon />}
       name="name"
       onChange={(event) => console.info('On input change')}
       placeholder="Enter your name here"
       type="text"
       variant="primary"
     />
-  </block.M>
-  <block.L>
+  </Form>
+</Playground>
+
+### Icons
+
+Inputs can be combined with an icon on the left side or the right. Use icons on the both sides is not recommended.
+
+<Playground direction="vertical" size="L">
+  <Form autoComplete="false">
     <Input
+      leftIcon={<InfoIcon />}
+      type="text"
       name="name"
-      onChange={(event) => console.info('On input change')}
       placeholder="Enter your name here"
-      type="text"
       variant="primary"
+      onChange={(event) => console.info('On input change')}
     />
-  </block.L>
-  <block.XL>
     <Input
+      type="text"
       name="name"
-      onChange={(event) => console.info('On input change')}
       placeholder="Enter your name here"
-      type="text"
       variant="primary"
+      onChange={(event) => console.info('On input change')}
+      rightIcon={<InfoIcon />}
     />
-  </block.XL>
-  <block.H>
     <Input
+      leftIcon={<InfoIcon />}
+      type="text"
       name="name"
-      onChange={(event) => console.info('On input change')}
       placeholder="Enter your name here"
-      type="text"
       variant="primary"
+      onChange={(event) => console.info('On input change')}
+      rightIcon={<InfoIcon />}
     />
-  </block.H>
+  </Form>
 </Playground>
 
-### Container
-
-Inputs can be placed inside the container. Input width is equal to container size.
+Icons can also be touch targets for nested components.
 
-<Playground direction="vertical">
-  <block.L>
+<Playground size="L" direction="vertical">
+  <Form autoComplete="false">
     <Input
-      leftIcon={<InfoIcon />}
+      rightIcon={
+        <block.S>
+          <ButtonIcon
+            icon={<InfoIcon />}
+            onClick={() => console.info('ButtonIcon clicked')}
+            variant="primary"
+          />
+        </block.S>
+      }
       type="text"
       name="name"
-      value="Primary"
       placeholder="Enter your name here"
-      variant="primary"
       onChange={(event) => console.info('On input change')}
+      variant="primary"
     />
-  </block.L>
-  <block.L>
     <Input
       leftIcon={<InfoIcon />}
       type="text"
@@ -281,7 +306,147 @@ Inputs can be placed inside the container. Input width is equal to container siz
         </block.S>
       }
     />
-  </block.L>
+  </Form>
+</Playground>
+
+### Variants
+
+Primary and secondary variants are should be used to focus user attention.
+
+<!-- example for secondary variant will be fixed with task FRNT-477 -->
+
+<Playground direction="vertical">
+  <Form autoComplete="false">
+    <Input
+      leftIcon={<InfoIcon />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Primary input"
+      type="text"
+      value="Primary"
+      variant="primary"
+    />
+    <Input
+      leftIcon={<InfoIcon />}
+      type="text"
+      name="name"
+      value="Secondary"
+      placeholder="Secondary input"
+      variant="secondary"
+      onChange={(event) => console.info('On input change')}
+    />
+  </Form>
+</Playground>
+
+Error variant can be used to focus user attention on error.
+
+<!-- example will be fixed with task FRNT-477 -->
+
+<Playground>
+  <Form autoComplete="false">
+    <Input
+      leftIcon={<InfoIcon />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Error input"
+      type="text"
+      value="Error"
+      variant="error"
+    />
+  </Form>
+</Playground>
+
+### Sizes
+
+Size controlled by the `component-level` block property not from the props.
+
+<Playground direction="vertical">
+  <Form autoComplete="false">
+    <block.S>
+      <Input
+        name="name"
+        onChange={(event) => console.info('On input change')}
+        placeholder="Enter your name here"
+        type="text"
+        variant="primary"
+      />
+    </block.S>
+    <block.M>
+      <Input
+        name="name"
+        onChange={(event) => console.info('On input change')}
+        placeholder="Enter your name here"
+        type="text"
+        variant="primary"
+      />
+    </block.M>
+    <block.L>
+      <Input
+        name="name"
+        onChange={(event) => console.info('On input change')}
+        placeholder="Enter your name here"
+        type="text"
+        variant="primary"
+      />
+    </block.L>
+    <block.XL>
+      <Input
+        name="name"
+        onChange={(event) => console.info('On input change')}
+        placeholder="Enter your name here"
+        type="text"
+        variant="primary"
+      />
+    </block.XL>
+    <block.H>
+      <Input
+        name="name"
+        onChange={(event) => console.info('On input change')}
+        placeholder="Enter your name here"
+        type="text"
+        variant="primary"
+      />
+    </block.H>
+  </Form>
+</Playground>
+
+### Container
+
+Inputs can be placed inside the container. Input width is equal to container size.
+
+<Playground direction="vertical">
+  <Form autoComplete="false">
+    <block.L>
+      <Input
+        leftIcon={<InfoIcon />}
+        type="text"
+        name="name"
+        value="Primary"
+        placeholder="Enter your name here"
+        variant="primary"
+        onChange={(event) => console.info('On input change')}
+      />
+    </block.L>
+    <block.L>
+      <Input
+        leftIcon={<InfoIcon />}
+        type="text"
+        name="name"
+        placeholder="Enter your name here"
+        onChange={(event) => console.info('On input change')}
+        variant="primary"
+        rightIcon={
+          <block.S>
+            <ButtonIcon
+              icon={<InfoIcon />}
+              onClick={() => console.info('ButtonIcon clicked')}
+              variant="primary"
+            />
+          </block.S>
+        }
+      />
+    </block.L>
+  </Form>
 </Playground>
 
 ### Kinds
@@ -292,15 +457,16 @@ Inputs can be placed inside the container. Input width is equal to container siz
 
 ### Props
 
-| Name           | Type                                                  | Default       | Description                                                 |
-| -------------- | ----------------------------------------------------- | ------------- | ----------------------------------------------------------- |
-| `type`         | `"text" ӏ "password" ӏ "email"`                       | `text`        | HTML type of the input                                      |
-| `name`         | `string`                                              |               | Name attribute specifies a name of the input                |
-| `value`        | `HTMLInputElement['value']`                           | `null`        | Value of input field                                        |
-| `onChange`     | `React.EventHandler<React.SyntheticEvent>;`           |               | On change event handler.                                    |
-| `variant`      | `string`                                              | `'secondary'` | Variant prop to style Input component                       |
-| `leftIcon`     | `React.ReactNode`                                     |               | Component to show on the left side of the text (ex.: Icon)  |
-| `disabled`     | `boolean`                                             |               | HTML disabled attribute                                     |
-| `placeholder`  | `string`                                              |               |  CSS pseudo-element represents the placeholder text         |
-|`rightIcon`     | `React.ReactNode`                                     |               | Component to show on the right side of the text (ex.: Icon) |
-| `...`          | `HTMLInputElement`                                    | `{}`          | Other props are inherited from `HTMLInputElement`           |
+| Name           | Type                                        | Default     | Description                                                 |
+| -------------- | ------------------------------------------- | ----------- | ----------------------------------------------------------- |
+| `autocomplete` | `"on" ӏ "off"`                              | `"off"`     | Autocomplete attribute                                      |
+| `type`         | `"text" ӏ "password" ӏ "email"`             | `text`      | HTML type of the input                                      |
+| `name`         | `string`                                    |             | Name attribute specifies a name of the input                |
+| `value`        | `HTMLInputElement['value']`                 | `null`      | Value of input field                                        |
+| `onChange`     | `React.EventHandler<React.SyntheticEvent>;` |             | On change event handler.                                    |
+| `variant`      | `string`                                    | `'default'` | Variant prop to style Input component                       |
+| `leftIcon`     | `React.ReactNode`                           |             | Component to show on the left side of the text (ex.: Icon)  |
+| `disabled`     | `boolean`                                   |             | HTML disabled attribute                                     |
+| `placeholder`  | `string`                                    |             | CSS pseudo-element represents the placeholder text          |
+| `rightIcon`    | `React.ReactNode`                           |             | Component to show on the right side of the text (ex.: Icon) |
+| `...`          | `HTMLInputElement`                          | `{}`        | Other props are inherited from `HTMLInputElement`           |
diff --git a/src/ui/elements/quarks/input-container/index.tsx b/src/ui/elements/quarks/input-container/index.tsx
index 27075188..b82cb0f0 100644
--- a/src/ui/elements/quarks/input-container/index.tsx
+++ b/src/ui/elements/quarks/input-container/index.tsx
@@ -1,64 +1,34 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-import { keyboardEventHandle } from 'lib';
+
 interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
-  onChange: React.EventHandler<React.SyntheticEvent>;
   rightIcon?: React.ReactNode;
 }
 
 const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
   children,
   className,
-  disabled,
+  disabled = 'false',
   leftIcon,
-  onChange,
   rightIcon,
-  variant = 'secondary',
-}) => {
-  const tabIndex = disabled ? -1 : 0;
-
-  const onKeyDown = React.useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-      }
-      const keyHandler = {
-        enter: (event: React.SyntheticEvent<Element, Event>) => {
-          onChange(event);
-        },
-      };
-
-      keyboardEventHandle({
-        event,
-        keyHandler,
-      });
-    },
-    [onChange],
-  );
-
-  return (
-    <div
-      className={className}
-      data-disabled={disabled}
-      data-variant={variant}
-      onKeyDown={onKeyDown}
-      tabIndex={tabIndex}
-    >
-      {leftIcon && <span data-icon="left">{leftIcon}</span>}
-      <div data-input="input">{children}</div>
-      {rightIcon && <span data-icon="right">{rightIcon}</span>}
-    </div>
-  );
-};
+  variant = 'default',
+}) => (
+  <div className={className} data-disabled={disabled} data-variant={variant}>
+    {leftIcon && <span data-icon="left">{leftIcon}</span>}
+    <div data-input="input">{children}</div>
+    {rightIcon && <span data-icon="right">{rightIcon}</span>}
+  </div>
+);
 
 export const InputContainer = styled(InputContainerBase)`
   --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
   --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) -
+      var(--woly-border-width)
   );
 
   --local-gap: var(--local-vertical);
@@ -72,7 +42,7 @@ export const InputContainer = styled(InputContainerBase)`
   width: 100%;
   outline: none;
 
-  padding: var(--local-vertical) 0;
+  padding: calc(var(--local-vertical) - var(--woly-border-width)) 0;
 
   box-sizing: border-box;
 
@@ -100,15 +70,10 @@ export const InputContainer = styled(InputContainerBase)`
   }
 
   [data-icon] {
-    --local-icon-size: var(--woly-line-height);
-
     display: flex;
     align-items: center;
     justify-content: center;
 
-    width: var(--local-icon-size);
-    height: var(--local-icon-size);
-
     svg > path {
       fill: var(--local-icon-fill);
     }
@@ -127,9 +92,8 @@ export const InputContainer = styled(InputContainerBase)`
     padding-left: var(--local-gap);
   }
 
-  &:focus {
+  &:focus-within {
     box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
-    outline: none;
 
     [data-icon] {
       --local-icon-fill: var(--woly-canvas-text-default);
@@ -142,10 +106,15 @@ export const InputContainer = styled(InputContainerBase)`
 
   &:active {
     --local-border-color: var(--woly-focus);
+    --local-icon-fill: var(--woly-canvas-text-default);
+  }
 
-    [data-icon] {
-      --local-icon-fill: var(--woly-canvas-text-default);
-    }
+  &:focus-within {
+    --local-border-color: var(--woly-focus);
+    --local-icon-fill: var(--woly-canvas-text-default);
+    --local-border-color: var(--woly-focus);
+
+    outline: none;
   }
 
   &[data-disabled='true'] {
diff --git a/src/ui/elements/quarks/input-element/index.tsx b/src/ui/elements/quarks/input-element/index.tsx
index 4ea6fca0..3f71f7c2 100644
--- a/src/ui/elements/quarks/input-element/index.tsx
+++ b/src/ui/elements/quarks/input-element/index.tsx
@@ -36,8 +36,8 @@ export const InputElement = styled(InputElementBase)`
 
   width: 100%;
 
-  font-size: var(--woly-font-size, 15px);
-  line-height: var(--woly-line-height, 24px);
+  font-size: var(--woly-font-size);
+  line-height: var(--woly-line-height);
 
   color: var(--local-value-color);
   background: var(--local-background);