Chakra UI Form Radio

Chakra UI Form Radio is a component of the Chakra UI library, a React component library for building customizable user interfaces. It provides a set of components and utilities to easily create radio buttons in forms, offering features like customizable colors, sizes, disabled states, and even the ability to create custom-styled radio buttons. In this article, we will explore the practical implementation of the Chakra UI Form Radio component by demonstrating all the types of radios.

Prerequisites:

• NPM and NodeJS
• ReactJS
• HTML, CSS, and JavaScript
• ReactJS ChakraUI

Approach:

We have created different Chakra UI Form Radios which includes Color-based Radios, Checked-Unchecked Radions, Size-based, Horizontal alignment radios, Invalid Radios, and also the Custom Radio buttons. Chakra UI Form Radio component can be used as the input element for the user that can be embedded in the application to take the input in terms of choice from the user.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the practical implementation of the Chakra UI Form Radio.

Javascript

import React from "react";
import {
    ChakraProvider,
    CSSReset,
    Box,
    Stack,
    Radio,
    RadioGroup,
    HStack,
    useRadio,
    useRadioGroup,
    Heading,
} from "@chakra-ui/react";
function RadioCard(props) {
    const { getInputProps, getRadioProps } = useRadio(props);
    const input = getInputProps();
    const checkbox = getRadioProps();
    return (
        <Box as="label">
            <input {...input} />
            <Box
                {...checkbox}
                cursor="pointer"
                borderWidth="1px"
                borderRadius="md"
                boxShadow="md"
                _checked={{
                    bg: "teal.600",
                    color: "white",
                    borderColor: "teal.600",
                }}
                _focus={{
                    boxShadow: "outline",
                }}
                px={5}
                py={3}
            >
                {props.children}
            </Box>
        </Box>
    );
}
function App() {
    const options = ["courses", "articles", "programming-languages"];
    const { getRootProps: radioGroupRootProps, getRadioProps: radioProps } =
        useRadioGroup({
            name: "example-radio-group",
            defaultValue: "courses",
            onChange: console.log,
        });
    const radioGroup = radioGroupRootProps();
    return (
        <ChakraProvider>
            <CSSReset />
            <Box p={4}>
                <Heading as="h1" color="green.500">
                    GeeksforGeeks
                </Heading>
                <Heading as="h3" mb={4}>
                    Chakra UI Form Radio
                </Heading>
                <Stack spacing={4}>
                    <RadioGroup {...radioGroup}>
                        <Stack direction="row">
                            {options.map((value) => (
                                <Radio key={value} value={value}>
                                    {value === "courses"
                                        ? "Courses"
                                        : value === "articles"
                                        ? "Articles"
                                        : "Programming Languages"}
                                </Radio>
                            ))}
                        </Stack>
                    </RadioGroup>
                    <RadioGroup defaultValue="programming-languages">
                        <Stack spacing={5} direction="row">
                            <Radio colorScheme="red" value="courses">
                                Courses - Custom Color
                            </Radio>
                            <Radio colorScheme="green" value="articles">
                                Articles - Custom Color
                            </Radio>
                            <Radio
                                colorScheme="blue"
                                value="programming-languages"
                            >
                                Programming Languages - Custom Color
                            </Radio>
                        </Stack>
                    </RadioGroup>
                    <Stack>
                        <Radio
                            size="sm"
                            name="size"
                            colorScheme="red"
                            value="courses"
                        >
                            Courses - Small
                        </Radio>
                        <Radio
                            size="md"
                            name="size"
                            colorScheme="green"
                            value="articles"
                        >
                            Articles - Medium
                        </Radio>
                        <Radio
                            size="lg"
                            name="size"
                            colorScheme="orange"
                            defaultChecked
                            value="programming-languages"
                        >
                            Programming Languages - Large
                        </Radio>
                    </Stack>
                    <RadioGroup defaultValue="courses">
                        <Stack>
                            <Radio value="courses" isDisabled>
                                Courses - Disabled
                            </Radio>
                            <Radio value="articles">Articles - Enabled</Radio>
                            <Radio value="programming-languages">
                                Programming Languages - Enabled
                            </Radio>
                        </Stack>
                    </RadioGroup>
                    <RadioGroup defaultValue="courses">
                        <Stack spacing={4} direction="row">
                            <Radio value="courses" isDisabled>
                                Courses - Horizontal
                            </Radio>
                            <Radio value="articles">
                                Articles - Horizontal
                            </Radio>
                            <Radio value="programming-languages">
                                Programming Languages - Horizontal
                            </Radio>
                        </Stack>
                    </RadioGroup>
                    <Radio isInvalid>Invalid Radio - Custom</Radio>
                    <HStack {...radioGroup}>
                        {options.map((value) => (
                            <RadioCard key={value} {...radioProps({ value })}>
                                {value === "courses"
                                    ? "Courses"
                                    : value === "articles"
                                    ? "Articles"
                                    : "Programming Languages"}{" "}
                                - Custom Radio
                            </RadioCard>
                        ))}
                    </HStack>
                </Stack>
            </Box>
        </ChakraProvider>
    );
}
export default App;

Step to run the application: Run the application using the following command:

npm run start

Output: Now go to http://localhost:3000 in your browser: