diff --git a/src/components/radiobutton/DOCS.md b/src/components/radiobutton/DOCS.md
deleted file mode 100644
index 9c31f33f..00000000
--- a/src/components/radiobutton/DOCS.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Radio
-
-Radio component.
-
-```js
-import { Radio, RadioButtonProps } from '@panenco/ui';
-```
-
-<!-- STORY -->
diff --git a/src/components/radiobutton/README.md b/src/components/radiobutton/README.md
deleted file mode 100644
index 3e90bdec..00000000
--- a/src/components/radiobutton/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Radio
-
-## Usage
-
-```js
-import { Radio } from '@panenco/ui';
-
-return (
-  <>
-    <Radio label="Label 1" name="RadioGroup" value="1" />
-    <Radio label="Label 2" name="RadioGroup" value="2" />
-    <Radio label="Label 3" name="RadioGroup" value="3" />
-    <Radio label="Label 4" name="RadioGroup" value="4" />
-  </>
-);
-```
-
----
-
-### Properties
-
-This component inherits the attributes of the **input** element and extends the functionality with next properties.
-
-- id - component id (generate unique id by default);
-- label - component label;
-- error - add this prop when smth went wrong;
-- wrapperProps - it's props which will be added to wrapper component;
-- inputProps - it's props which will be added to input component;
-- pointColor - customizing point color for different cases;
-- ref - wrapper ref;
-
-| propName     | propType                  | defaultValue      | isRequired |
-| ------------ | ------------------------- | ----------------- | ---------- |
-| error        | string                    | -                 | -          |
-| label        | string                    | -                 | -          |
-| id           | string or (any)           | generate uniqueID | -          |
-| pointColor   | string                    | -                 | -          |
-| inputProps   | React.InputHTMLAttributes | -                 | -          |
-| wrapperProps | React.LabelHTMLAttributes | -                 | -          |
-| ref          | React.RefObject           | -                 | -          |
diff --git a/src/components/radiobutton/index.tsx b/src/components/radiobutton/index.tsx
index 816bd1f2..7a9808f5 100644
--- a/src/components/radiobutton/index.tsx
+++ b/src/components/radiobutton/index.tsx
@@ -2,7 +2,6 @@ import cx from 'classnames';
 
 import { Text } from 'components';
 import * as React from 'react';
-import { idGenerator } from 'utils/helpers';
 import { useTheme } from 'utils/hooks';
 
 import { InputPropsType } from '../../utils/types';
@@ -14,10 +13,31 @@ interface WrapperProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
 }
 
 export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Is checked;
+   * @default false
+   * */
+  checked?: boolean;
+  /**
+   * Error text;
+   */
   error?: string;
+  /**
+   * Child html input component props. Will be removed in next version;
+   */
   inputProps?: InputPropsType;
+  /**
+   * RadioButton label;
+   */
   label?: string;
-  pointColor?: string; // will be removed in next version
+  /**
+   * Point color;
+   */
+  pointColor?: string;
+  // will be removed in next version
+  /**
+   * Wrapper props;
+   */
   wrapperProps?: WrapperProps;
 }
 
@@ -25,7 +45,6 @@ export const Radio = React.forwardRef<HTMLLabelElement, RadioButtonProps>(
   (
     {
       label,
-      id,
       className,
       checked,
       value,
@@ -39,20 +58,18 @@ export const Radio = React.forwardRef<HTMLLabelElement, RadioButtonProps>(
     ref,
   ): JSX.Element => {
     const theme = useTheme();
-    const uniqueID = idGenerator();
-    const defaultId = id || uniqueID;
-    const { className: inputClassName, ...otherInputProps } = inputProps;
+    const { className: inputClassName, id, ...otherInputProps } = inputProps;
 
     return (
       <StyledRadio theme={theme} ref={ref} error={error} pointColor={pointColor} {...wrapperProps}>
-        <label className={cx('label', disabled && 'labelDisabled', className)} htmlFor={id || defaultId}>
+        <label className={cx('label', disabled && 'labelDisabled', className)} htmlFor={id}>
           <input
             type='radio'
             className={cx('radiobox', inputClassName)}
-            id={id || defaultId}
+            id={id}
             disabled={disabled}
-            checked={checked || value === id}
-            value={id || value || defaultId}
+            checked={checked}
+            value={value}
             {...otherInputProps}
             {...props}
           />
diff --git a/stories/radiobutton/Radio.stories.tsx b/stories/radiobutton/Radio.stories.tsx
new file mode 100644
index 00000000..1404b003
--- /dev/null
+++ b/stories/radiobutton/Radio.stories.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Radio } from 'components/radiobutton';
+
+export default {
+  title: 'Example/Radio',
+  component: Radio,
+  argTypes: {
+    pointColor: { control: 'color' },
+  },
+  args: {
+    label: 'Radio button label',
+    checked: true,
+    inputProps: {
+      id: 'radio-button',
+    },
+  },
+} as ComponentMeta<typeof Radio>;
+
+const Template: ComponentStory<typeof Radio> = (args) => <Radio {...args} />;
+
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+
+Error.args = {
+  error: 'Validation error',
+  checked: false,
+};
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  disabled: true,
+  checked: false,
+};
diff --git a/stories/radiobutton/index.jsx b/stories/radiobutton/index.jsx
deleted file mode 100644
index 65f33c60..00000000
--- a/stories/radiobutton/index.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// import React, { useState } from 'react';
-// import { Radio, Row, Col } from 'components';
-// import RadioDocs from 'components/radiobutton/DOCS.md';
-// import README from 'components/radiobutton/README.md';
-// import { decorator } from '../../utils/decorator';
-// import { WrappedComponent } from '../helpers/wrapped';
-
-// export default decorator('Radio', RadioDocs, README).add('Radio component', () => {
-//   const options = [
-//     {
-//       label: 'Radio',
-//       value: 1,
-//     },
-//     {
-//       label: 'Radio',
-//       value: 2,
-//     },
-//     {
-//       label: 'Radio',
-//       value: 3,
-//     },
-//     {
-//       label: 'Radio',
-//       value: 4,
-//     },
-//   ];
-
-//   const [isChecked, setIsChecked] = useState(options[0].value);
-
-//   return (
-//     <WrappedComponent>
-//       <Row>
-//         {options.map((el) => {
-//           return (
-//             <Col key={el.value} s='1' m='2' l='3' style={{ display: 'flex', justifyContent: 'center' }}>
-//               <Radio
-//                 label={el.label}
-//                 name='radio'
-//                 value={el.value}
-//                 checked={el.value === isChecked}
-//                 onChange={(e) => setIsChecked(Number(e.target.value))}
-//               />
-//             </Col>
-//           );
-//         })}
-//       </Row>
-//       <Row style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
-//         <Col s='1' m='2' l='3' style={{ display: 'flex', justifyContent: 'center' }}>
-//           <Radio label='Radio Disabled' name='radio' disabled value='test' onChange={() => {}} />
-//         </Col>
-//         <Col s='1' m='2' l='3' style={{ display: 'flex', justifyContent: 'center' }}>
-//           <Radio label='Placeholder' name='radio1' error='Error label' value='placeholder' onChange={() => {}} />
-//         </Col>
-//       </Row>
-//     </WrappedComponent>
-//   );
-// });