Text Field + Radio Button

[tunile943]

Branches: atoms/text-field + atoms/radio-group

Task at Hand

1. View the Design System for the Components and the Prototyping for create a meeting process.
2. Create a folder /atoms under /components. Inside /atoms, you should create folders /TextField and /RadioGroup with a file index.tsx inside containing the code for that atom.
3. Implement a text field and a radio button group adhering to the Design System above.

Picture of text field components:

The following are the props for textfield:

interface TextFieldProps { label: string; value?: string; onChange: (value: string) => void; underlineOnFocus?: boolean;

}

Picture of radio buttons group components:

The following are the props for radio buttons group:

interface RadioGroupProps { label: string;
options: string[];
selectedOption: string; onChange: (option: string) => void; name: string; disabledOptions?: string[];

}

4. Confirm that your code and pull request follow the Pull Request Checklist. You might need to do two separate PRs for these two brances.

Acceptance Criteria

• [ ] Create reusable atomic components which can be used in different contexts

Notes

• When the user clicks on the text field, it should has a pink underline. You can check the prototype's create a meeting process to envision how this process will look like.