@radix-ui/react-radio-group

What is @radix-ui/react-radio-group?

@radix-ui/react-radio-group is a React component library that provides accessible and customizable radio group components. It is part of the Radix UI suite, which focuses on providing unstyled, accessible components that can be easily styled to fit any design system.

What are @radix-ui/react-radio-group's main functionalities?

Basic Radio Group

This code demonstrates a basic radio group with three options. The `defaultValue` prop sets the initially selected option.

```jsx
import * as RadioGroup from '@radix-ui/react-radio-group';

function App() {
  return (
    <RadioGroup.Root defaultValue="option1">
      <RadioGroup.Item value="option1">Option 1</RadioGroup.Item>
      <RadioGroup.Item value="option2">Option 2</RadioGroup.Item>
      <RadioGroup.Item value="option3">Option 3</RadioGroup.Item>
    </RadioGroup.Root>
  );
}

export default App;
```

Custom Styling

This example shows how to apply custom styles to the radio group and its items using CSS classes.

```jsx
import * as RadioGroup from '@radix-ui/react-radio-group';
import './styles.css';

function App() {
  return (
    <RadioGroup.Root className="custom-radio-group" defaultValue="option1">
      <RadioGroup.Item className="custom-radio-item" value="option1">Option 1</RadioGroup.Item>
      <RadioGroup.Item className="custom-radio-item" value="option2">Option 2</RadioGroup.Item>
      <RadioGroup.Item className="custom-radio-item" value="option3">Option 3</RadioGroup.Item>
    </RadioGroup.Root>
  );
}

export default App;
```

Controlled Radio Group

This code demonstrates a controlled radio group where the selected value is managed by React state.

```jsx
import * as RadioGroup from '@radix-ui/react-radio-group';
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('option1');

  return (
    <RadioGroup.Root value={value} onValueChange={setValue}>
      <RadioGroup.Item value="option1">Option 1</RadioGroup.Item>
      <RadioGroup.Item value="option2">Option 2</RadioGroup.Item>
      <RadioGroup.Item value="option3">Option 3</RadioGroup.Item>
    </RadioGroup.Root>
  );
}

export default App;
```

Other packages similar to @radix-ui/react-radio-group

react-radio-group

react-radio-group is a simple and lightweight library for creating radio groups in React. It provides basic functionality for grouping radio buttons and handling their state. Compared to @radix-ui/react-radio-group, it is less feature-rich and does not focus on accessibility as much.

react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components for React. It includes a `Form.Check` component that can be used to create radio buttons. While it offers a wide range of components and is easy to use, it is more opinionated in terms of styling compared to @radix-ui/react-radio-group.

material-ui

material-ui is a comprehensive library of React components that implement Google's Material Design. It includes a `RadioGroup` component that provides similar functionality to @radix-ui/react-radio-group but with Material Design styling. It is a good choice if you are looking for a more styled and opinionated solution.

README

react-radio-group

Installation

$ yarn add @radix-ui/react-radio-group
# or
$ npm install @radix-ui/react-radio-group

Usage

View docs here.