@ouroboros/react-radiobuttons-mui

A React component using real buttons to simulate radio inputs

Installation

npm

npm install @ouroboros/react-radiobuttons-mui

Using

import RadioButtons from '@ouroboros/react-radiobuttons-mui';

function App(props) {

	const [type, setType] = useState('email');

	return (
		<RadioButtons
			border={true}
			gridContainerProps={{spacing: 2}}
			gridItemProps={{ xs: 12, sm: 6 }}
			label="Type"
			onChange={setType}
			options={[
				{text: 'E-Mail', value: 'email'},
				{text: 'SMS', value: 'sms'}]}
			value={type}
			variant="grid"
		/>
	);
}

Props

| Name | Type | Required | Description | |--|--|--|--| | border | boolean | No | Display a border around the buttons | | buttonProps | object | No | The props to pass to the Button components | | defaultValue | string | No | The default/initial value of the radio | | gridContainerProps | object | No | The props to pass to the Grid container if variant = grid | | gridItemProps | object | No | The props to pass to the Grid items if variant = grid | | label | string | No | The string to display above the buttons | | onChange | function | No | The function called with the new value (string) => void | | options | object[] | Yes | The list of value and text of each button, if text is not passed, value is used for both | | value | string | No | The current value | | variant| 'free' | 'grid' | No | The method to use to display the buttons. Using 'free' simply creates one button after the other with no styling. Using 'grid' allows you to set Grid props for containers (gridContainerProps) and items (gridItemProps) |