Forms

Usage chakra ui

input

import { Input } from '@chakra-ui/react'

function inputExample() {
const [value, setValue] = useState("")


return(
<>
<Input 
    placeholder='Basic usage'
    onChange={(e)=> setValue(e.target.value)}/>
</>
)
}

checkbox

import { Checkbox } from '@chakra-ui/react'

function RadioExample() {
  const [value, setValue] = useState("")
  
  return (
    <>
    <Checkbox size='lg' colorScheme="yellow" onChange={(e) => setValue(e.target.checked)}>
        <Text fontSize={20} fontWeight="bold">Buy</Text>
    </Checkbox>
    </>
  )

radiobutton

import { Radio, RadioGroup } from '@chakra-ui/react'
import React, { useState } from 'React'

function RadioExample() {
  const [value, setValue] = useState("")
  
  return (
    <RadioGroup onChange={(e) => setValue(e.target.value)} value={value}>
      <Stack direction='row'>
        <Radio value='1'>First</Radio>
        <Radio value='2'>Second</Radio>
        <Radio value='3'>Third</Radio>
      </Stack>
    </RadioGroup>
  )
}

switch

import { Switch } from '@chakra-ui/react'
import React, { useState } from 'React'

function RadioExample() {
  const [value, setValue] = useState(false)
  
  return (
    <>
    <Switch
      id="mobile-notification"
      defaultChecked={false}
      onChange={(e) => {setValue(e.target.checked)}}
      colorScheme='blue'
      />
    </>
  )
  }

select

import React, {useState} from 'React'
import { Select } from '@chakra-ui/react'

function SelectExample() {
const [value, setValue] = useState("")

return(
<>
<Select placeholder='Select option' onChange={(e) => setValue(e.target.value)} value={value}>
  <option value='A'>Option 1</option>
  <option value='B'>Option 2</option>
  <option value='C'>Option 3</option>
</Select>
</>
)
}