Chakra UI Form Example - Chakra-ui Typing CST Test

Chakra UI Form Example — Chakra-ui Code

Demonstrates a simple form with inputs and submit button using Chakra UI.

import React from 'react';
import { ChakraProvider, FormControl, FormLabel, Input, Button, VStack, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({});

const FormExample = () => (
	<ChakraProvider theme={theme}>
		<VStack spacing={4} mt={10} mx='auto' maxW='md'>
		<FormControl>
		<FormLabel>Name</FormLabel>
		<Input placeholder='Enter your name' />
		</FormControl>
		<FormControl>
		<FormLabel>Email</FormLabel>
		<Input type='email' placeholder='Enter your email' />
		</FormControl>
		<Button colorScheme='blue'>Submit</Button>
		</VStack>
	</ChakraProvider>
);

export default FormExample;

Chakra-ui Language Guide

Chakra UI is a modular and accessible React component library that provides a set of composable, themeable, and responsive UI components.

More Chakra-ui Typing Exercises

Practice Other Languages