Add radio buttons

src/components/input/Input.module.scss

@@ -50,6 +50,10 @@
   position: absolute;
   left: 16px;
   transition: transform 100ms, left 100ms;
+  pointer-events: none;
+
+
+  width: 20%;
 }
 
 .input {
@@ -64,5 +68,8 @@
   &:not(:placeholder-shown) ~ .label {
     left: 100%;
     transform: translateX(calc(-100% - 0.5em)) scale(0.8);
+
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }

src/components/radio/button/RadioButton.module.scss

@@ -0,0 +1,58 @@
+@import "../../../styles/colors.scss";
+
+.containerLabel {
+    display: grid;
+    grid-template-columns: 1em auto;
+    gap: 0.5em;
+}
+
+.radioButton {
+    position: relative;
+    appearance: none;
+    width: 1.2em;
+    height: 1.2em;
+    transform: translateY(-0.075em);
+    border: 0.15em solid $unimportant;
+    border-radius: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    transition: border 100ms linear;
+}
+
+.radioButton:disabled {
+    border-color: $unimportant;
+}
+
+.radioButton:checked {
+    border-color: $accent;
+}
+
+.radioButton:disabled {
+    border-color: $disabled;
+}
+
+.radioButton::before {
+    content: "";
+    width: 0.6em;
+    height: 0.6em;
+
+    border-radius: 100%;
+    transform: scale(0);
+    transition: transform 100ms ease-in-out;
+    background: $accent;
+}
+
+.radioButton:disabled::before {
+    background: $disabled;
+}
+
+.radioButton:checked::before {
+    transform: scale(1);
+}
+
+.radioButton:focus-within {
+    border: 0.2em solid $accent;
+}

src/components/radio/button/RadioButton.tsx

@@ -0,0 +1,23 @@
+import styles from "./RadioButton.module.scss";
+import { useState } from "react";
+
+interface RadioButtonProps {
+    disabled?: boolean;
+    value?: string;
+    onClick: React.HTMLAttributes<HTMLInputElement>["onChange"];
+    label: string;
+    checked?: boolean;
+}
+
+const RadioButton: React.FC<RadioButtonProps> = ({ onClick, checked, disabled, label, value }) => {
+    return (
+        <>
+            <label className={styles.containerLabel}>
+                <input className={styles.radioButton} type="radio" value={value} checked={checked} disabled={disabled} onClick={onClick} />
+                {label}
+            </label>
+        </>
+    )
+}
+
+export default RadioButton;

src/stories/RadioButton.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import RadioButton from "../components/radio/button/RadioButton";
+
+export default { title: "Radio button", component: RadioButton } as ComponentMeta<typeof RadioButton>;
+
+const Template: ComponentStory<typeof RadioButton> = (args) => <RadioButton {...args} />;
+
+export const DefaultInput = Template.bind({});
+
+DefaultInput.args = {
+  value: "test",
+  label: "test",
+  checked: false,
+  disabled: false
+};

src/styles/colors.scss

@@ -1,2 +1,3 @@
 $accent: #ff6565;
 $unimportant: #636363;
+$disabled: #afafaf;