diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index e19b9260..044b6d02 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -20,7 +20,7 @@ export const Global = styled.div`
 
   /* should be rewritten to formulas */
   --woly-line-height: 24px;
-  --woly-border-width: 1.5px;
+  --woly-border-width: 2px;
   --woly-rounding: 4px;
   --woly-font-size: 15px;
   --woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
@@ -47,7 +47,7 @@ export const Global = styled.div`
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: var(--palette-snow-100);
     --woly-canvas-hover: var(--palette-snow-500);
-    --woly-canvas-active: var(--palette-snow-500);
+    --woly-canvas-active: var(--palette-lavender-500);
 
     --woly-canvas-text-default: var(--palette-snow-1000);
     --woly-canvas-text-disabled: var(--palette-snow-500);
diff --git a/src/ui/atoms/input/index.tsx b/src/ui/atoms/input/index.tsx
index f8877175..fdb5f86f 100644
--- a/src/ui/atoms/input/index.tsx
+++ b/src/ui/atoms/input/index.tsx
@@ -52,6 +52,11 @@ 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 cb795bc3..cae97f89 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, Form } from 'box-styles'
+import { Playground, block, State } from 'box-styles'
 
 import { ButtonIcon } from '../../atoms';
 
@@ -54,15 +54,13 @@ Specs:
 ### Example
 
 <Playground>
-  <Form autoComplete="false">
-    <Input
-      name="name"
-      onChange={(event) => console.info('On input change')}
-      placeholder="Enter your name here"
-      type="text"
-      variant="primary"
-    />
-  </Form>
+  <Input
+    name="name"
+    onChange={(event) => console.info('On input change')}
+    placeholder="Enter your name here"
+    type="text"
+    variant="primary"
+  />
 </Playground>
 
 ### Disabled
@@ -70,25 +68,23 @@ Specs:
 Disabled text fields are uneditable. They have less opacity so that they appear less tappable.
 
 <Playground direction="vertical">
-  <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>
+  <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"
+  />
 </Playground>
 
 ### Icons
@@ -96,73 +92,69 @@ 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">
-  <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>
+  <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 />}
+  />
 </Playground>
 
 Icons can also be touch targets for nested components.
 
 <Playground size="L" direction="vertical">
-  <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>
+  <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>
+    }
+  />
 </Playground>
 
 ### Variants
@@ -172,41 +164,37 @@ 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>
+  <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')}
+  />
 </Playground>
 
 Error variant can be used to focus user attention on error.
 
 <Playground>
-  <Form autoComplete="false">
-    <Input
-      leftIcon={<InfoIcon />}
-      name="name"
-      onChange={(event) => console.info('On input change')}
-      placeholder="Error input"
-      type="text"
-      variant="danger"
-    />
-  </Form>
+  <Input
+    leftIcon={<InfoIcon />}
+    name="name"
+    onChange={(event) => console.info('On input change')}
+    placeholder="Error input"
+    type="text"
+    variant="danger"
+  />
 </Playground>
 
 ### Sizes
@@ -214,81 +202,70 @@ Error variant can be used to focus user attention on error.
 Size controlled by the `component-level` block property not from the props.
 
 <Playground direction="vertical">
-  <Form autoComplete="false">
+  <block.S>
     <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"
     />
-  </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">
+  </block.M>
+  <block.L>
     <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 />}
     />
-  </Form>
+  </block.H>
 </Playground>
 
-Icons can also be touch targets for nested components.
+### Container
 
-<Playground size="L" direction="vertical">
-  <Form autoComplete="false">
+Inputs can be placed inside the container. Input width is equal to container size.
+
+<Playground direction="vertical">
+  <block.L>
     <Input
-      rightIcon={
-        <block.S>
-          <ButtonIcon
-            icon={<InfoIcon />}
-            onClick={() => console.info('ButtonIcon clicked')}
-            variant="primary"
-          />
-        </block.S>
-      }
+      leftIcon={<InfoIcon />}
       type="text"
       name="name"
+      value="Primary"
       placeholder="Enter your name here"
-      onChange={(event) => console.info('On input change')}
       variant="primary"
+      onChange={(event) => console.info('On input change')}
     />
+  </block.L>
+  <block.L>
     <Input
       leftIcon={<InfoIcon />}
       type="text"
@@ -306,147 +283,7 @@ Icons can also be touch targets for nested components.
         </block.S>
       }
     />
-  </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>
+  </block.L>
 </Playground>
 
 ### Kinds
@@ -457,16 +294,15 @@ Inputs can be placed inside the container. Input width is equal to container siz
 
 ### Props
 
-| 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`           |
+| 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`                                    | `'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 b82cb0f0..80dc5016 100644
--- a/src/ui/elements/quarks/input-container/index.tsx
+++ b/src/ui/elements/quarks/input-container/index.tsx
@@ -1,7 +1,7 @@
 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;
@@ -12,23 +12,52 @@ interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement
 const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
   children,
   className,
-  disabled = 'false',
+  disabled = false,
   leftIcon,
+  onChange,
   rightIcon,
   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>
-);
+}) => {
+  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>
+  );
+};
 
 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-border-width)
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
   --local-gap: var(--local-vertical);
@@ -70,10 +99,15 @@ 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);
     }
@@ -94,6 +128,7 @@ export const InputContainer = styled(InputContainerBase)`
 
   &: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);
diff --git a/src/ui/molecules/index.ts b/src/ui/molecules/index.ts
index cd84c3a7..1a336ebf 100644
--- a/src/ui/molecules/index.ts
+++ b/src/ui/molecules/index.ts
@@ -2,6 +2,7 @@ export { Checkbox } from './checkbox';
 export { Field } from './field';
 export { InputPassword } from './input-password';
 export { Modal } from './modal';
+export { RadioButton } from './radio-button';
 export { Popover } from './popover';
 export { Select } from './select';
 export { Switch } from './switch';
diff --git a/src/ui/molecules/input-password/usage.mdx b/src/ui/molecules/input-password/usage.mdx
index 73984694..d1c6fe49 100644
--- a/src/ui/molecules/input-password/usage.mdx
+++ b/src/ui/molecules/input-password/usage.mdx
@@ -46,7 +46,8 @@ Disabled text fields are uneditable. They have less opacity so that they appear
 
 ### 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-476 -->
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
@@ -67,13 +68,13 @@ Primary and danger variants are should be used to focus user attention.
         name="name"
         placeholder="Enter password"
         onChange={(event) => console.info('On input change')}
-        variant="danger"
+        variant="secondary"
       />
     )}
   </State>
 </Playground>
 
-Secondary variant should be used as a default variant.
+Error variant can be used to focus user attention on error.
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
@@ -83,7 +84,7 @@ Secondary variant should be used as a default variant.
         name="name"
         placeholder="Enter password"
         onChange={(event) => console.info('On input change')}
-        variant="secondary"
+        variant="danger"
       />
     )}
   </State>
@@ -195,13 +196,13 @@ Inputs can be placed inside the container. Input width is equal to container siz
 
 ### Props
 
-| Name           | Type                                         | Default       | Description                                                 |
-| -------------- | -------------------------------------------- | ------------- | ----------------------------------------------------------- |
-| `disabled`     | `boolean`                                    | `null`        | HTML disabled attribute                                     |
-| `name`         | `string`                                     |               | HTML name attribute                                         |
-| `onChange`     | `React.ChangeEventHandler<HTMLInputElement>` |               | Callback when input is changed                              |
-| `value`        | `HTMLInputElement['value']`                  | `null`        | HTML value attribute                                        | 
-| `variant`      | `string`                                     | `'secondary'` | Variant prop to style InputPassword component               |
-| `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                                                 |
+| ------------- | -------------------------------------------- | ----------- | ----------------------------------------------------------- |
+| `disabled`    | `boolean`                                    | `null`      | HTML disabled attribute                                     |
+| `name`        | `string`                                     |             | HTML name attribute                                         |
+| `onChange`    | `React.ChangeEventHandler<HTMLInputElement>` |             | Callback when input is changed                              |
+| `value`       | `HTMLInputElement['value']`                  | `null`      | HTML value attribute                                        |
+| `variant`     | `string`                                     | `'default'` | Variant prop to style InputPassword component               |
+| `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/molecules/radio-button/index.tsx b/src/ui/molecules/radio-button/index.tsx
new file mode 100644
index 00000000..a8c0863c
--- /dev/null
+++ b/src/ui/molecules/radio-button/index.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Variant } from 'lib/types';
+import { keyboardEventHandle } from 'lib';
+
+interface RadioButtonProps {
+  className?: string;
+  disabled?: boolean;
+  id: string;
+  checked: boolean;
+  onChange: React.EventHandler<React.SyntheticEvent>;
+  text?: string;
+  name: string;
+}
+
+const RadioButtonBase: React.FC<RadioButtonProps & Variant> = ({
+  className,
+  disabled = false,
+  id,
+  checked,
+  onChange,
+  text,
+  name,
+  variant = 'primary',
+  ...p
+}) => {
+  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}
+    >
+      <label htmlFor={id}>
+        <input checked={checked} id={id} name={name} onChange={onChange} type="radio" {...p} />
+        <span data-checkbox />
+        <span data-text>{text}</span>
+      </label>
+    </div>
+  );
+}
+
+
+export const RadioButton = styled(RadioButtonBase)`
+  --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)
+  );
+  --local-gap: var(--woly-const-m);
+
+  --local-radio-size: 18px;
+  --local-ellipse-size: 10px;
+
+  --local-color-text: var(--woly-canvas-text-default);
+  --local-background: var(--woly-shape-text-default);
+
+  --local-icon-fill: var(--woly-shape-default);
+
+  --local-border-color: var(--woly-canvas-hover);
+  --local-border-rounding: 50%;
+  
+  display: flex;
+  align-items: center;
+  outline: none;
+  border-radius: var(--local-border-rounding);
+
+  margin-right: var(--local-vertical);
+
+  label {
+    display: flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    input {
+      display: none;
+      outline: none;
+    }
+  }
+
+  [data-checkbox] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   
+    width: var(--local-radio-size);
+    height: var(--local-radio-size);
+
+    background: var(--local-background);
+    border-radius: var(--local-border-rounding);
+    border: var(--woly-border-width) solid var(--local-border-color);
+
+    margin-right: var(--local-gap);
+  }
+
+  input:checked + [data-checkbox] {
+    --local-border-color: var(--woly-shape-default);
+    &:before {
+      content: '';
+
+      width: var(--local-ellipse-size);
+      height: var(--local-ellipse-size);
+
+      background-color: var(--local-icon-fill);
+      border-radius: var(--local-border-rounding);
+    }
+
+    &:hover {
+      --local-border-color: var(--woly-shape-hover);
+      --local-icon-fill: var(--woly-shape-hover);
+    }
+
+    &:active {
+      --local-border-color: var(--woly-shape-active);
+      --local-icon-fill: var(--woly-shape-active);
+    }
+  }
+
+  &:hover {
+    --local-border-color: var(--woly-shape-hover);
+  }
+
+  &:active > label > [data-checkbox]{
+   --local-border-color: var(--woly-shape-active);
+  }
+
+  &:focus > label > [data-checkbox]{
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  }
+ 
+  &[data-disabled='true'] {
+    pointer-events: none;
+
+    [data-checkbox] {
+      --local-border-color: var(--woly-shape-disabled);
+    }
+
+    input:checked + [data-checkbox] {
+      --local-border-color: var(--woly-shape-disabled);
+      --local-icon-fill: var(--woly-shape-disabled);
+    }
+
+    [data-text] {
+      --local-color-text: var(--woly-canvas-text-disabled);
+    }
+  }
+
+  [data-text] {
+    font-size: var(--woly-font-size);
+    line-height: var(--woly-line-height);
+    color: var(--local-color-text);
+  }
+` as StyledComponent<'div', Record<string, unknown>, RadioButtonProps & Variant>;
diff --git a/src/ui/molecules/radio-button/usage.mdx b/src/ui/molecules/radio-button/usage.mdx
new file mode 100644
index 00000000..f8155885
--- /dev/null
+++ b/src/ui/molecules/radio-button/usage.mdx
@@ -0,0 +1,153 @@
+---
+name: radio-button
+category: molecules
+package: 'woly'
+---
+
+import { RadioButton } from './index';
+import { Playground, State } from 'box-styles';
+
+The `RadioButton` component lets you add a radio button and assign it to a radio group.
+Users can select only one radio button at a time within a radio group.
+
+### Radio button group.
+
+Radio buttons are used for mutually exclusive choices, not for multiple choices.
+Only one radio button can be selected at a time.
+When a user chooses a new item, the previous choice is automatically deselected.
+
+### Example
+
+<Playground direction='vertical'>
+  <State initial="no" change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <RadioButton 
+          name="my-input" 
+          id="yes" 
+          checked={value} 
+          onChange={change} 
+          variant="primary" 
+          text="yes" 
+        />
+        <RadioButton 
+          name="my-input" 
+          id="no" 
+          checked={value} 
+          onChange={change} 
+          variant="primary" 
+          text="no"
+        />
+      </>
+    )}
+  </State>
+</Playground>
+
+### Disabled
+
+Disabled radio button are uneditable. They have less opacity so that they appear less tappable.
+
+<Playground>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <RadioButton id="one" checked disabled variant="primary" text="disabled" />
+    )}
+  </State>
+</Playground>
+
+### Variants
+
+Primary and danger variants are should be used to focus user attention.
+
+<Playground direction='vertical'>
+  <State initial="no" change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <RadioButton 
+          name="my-input" 
+          id="yes" 
+          checked={value} 
+          onChange={change} 
+          variant="primary" 
+          text="yes" 
+        />
+        <RadioButton 
+          name="my-input" 
+          id="no" 
+          checked={value} 
+          onChange={change} 
+          variant="primary" 
+          text="no"
+        />
+      </>
+    )}
+  </State>
+</Playground>
+
+<Playground direction='vertical'>
+  <State initial="no" change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <RadioButton 
+          name="my-input" 
+          id="yes" 
+          checked={value} 
+          onChange={change} 
+          variant="danger"
+          text="yes" 
+        />
+        <RadioButton 
+          name="my-input" 
+          id="no" 
+          checked={value} 
+          onChange={change} 
+          variant="danger"
+          text="no"
+        />
+      </>
+    )}
+  </State>
+</Playground>
+
+Secondary variant should be used as default variant
+
+<Playground direction='vertical'>
+  <State initial="no" change={(i) => !i}>
+    {(value, change) => (
+      <>
+        <RadioButton 
+          name="my-input" 
+          id="yes" 
+          checked={value} 
+          onChange={change} 
+          variant="secondary" 
+          text="yes" 
+        />
+        <RadioButton 
+          name="my-input" 
+          id="no" 
+          checked={value} 
+          onChange={change} 
+          variant="secondary" 
+          text="no"
+        />
+      </>
+    )}
+  </State>
+</Playground>
+### Kinds
+
+| Name          | Description                                                        |
+| ------------- | ------------------------------------------------------------------ |
+| `RadioButton` | Base radio-button. Useful for creating a new kind of radio-buttons |
+
+### Props
+
+| Name       | Type                                         | Default     | Description                                       |
+| ---------- | -------------------------------------------- | ----------- | ------------------------------------------------- |
+| `checked`  | `boolean`                                    |             | Whether radio-button is checked or not            |
+| `disabled` | `boolean`                                    |             | Disable radio-button                              |
+| `id`       | `string`                                     |             | HTML id attribute                                 |
+| `onChange` | `React.ChangeEventHandler<HTMLInputElement>` |             | Callback when radio-button is clicked             |
+| `variant`  | `string`                                     | `'default'` | Variant prop to style RadioButton component       |
+| `...`      | `HTMLInputElement`                           | `{}`        | Other props are inherited from `HTMLInputElement` |