@bolttech/atoms-radio

Radio Component README

The Radio component is a React component designed to provide a radio button input element with support for grouping and contextual interactions. This component is a part of the project's UI module and is intended to enhance the usability of radio button selections within forms or user interfaces.

Table of Contents

• Installation
• Usage
• Props
• Radio Group Context
• Example
• Contributing

Installation

To use the Radio component in your React application, you need to follow these steps:

Using npm

npm install @bolttech/frontend-foundations @bolttech/atoms-radio

Using Yarn

yarn add @bolttech/frontend-foundations @bolttech/atoms-radio

Once you have the required dependencies installed, you can start using the Radio component in your React application.

Usage

The Radio component provides a radio button input element along with a label. It can be used to build radio button groups with contextual interactions.

To use the component, import it and include it in your JSX:

import React from 'react';
import {Radio} from '@bolttech/atoms-radio';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Radio
        id="radio-1"
        dataTestId="radio-1"
        label="Option 1"
        value="option1"
      />
      <Radio
        id="radio-2"
        dataTestId="radio-2"
        label="Option 2"
        value="option2"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Radio component accepts the following props:

Prop	Type	Description
id	string	The ID attribute for the radio input element.
dataTestId	string	The data-testid attribute for testing purposes.
label	string	The label to be displayed next to the radio button.
value	string	The value associated with the radio button.
disabled	boolean	Whether the radio button is disabled.

Radio Group Context

The Radio component supports a Radio Group Context, which can be provided by the RadioGroupProvider. This context allows you to group related radio buttons together and manage their state.

To use the Radio Group Context, you need to wrap your radio buttons with the RadioGroupProvider:

import React from 'react';
import {Radio, RadioGroupProvider} from '@bolttech/atoms-radio';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <RadioGroupProvider selected="option1">
        <Radio id="radio-1" label="Option 1" value="option1" />
        <Radio id="radio-2" label="Option 2" value="option2" />
      </RadioGroupProvider>
    </BolttechThemeProvider>
  );
}

export default App;

Example

Here's an example of using the Radio component with the Radio Group Context:

<RadioGroupProvider selected="option1">
  <Radio id="radio-1" label="Option 1" value="option1" />
  <Radio id="radio-2" label="Option 2" value="option2" />
</RadioGroupProvider>

This will render two radio buttons labeled "Option 1" and "Option 2" with the first option selected.

Contributing

Contributions to the Radio component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.