Chataak - App

Custom

Use the CustomTextField component for the custom variant.

Default

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldCustom = () => {
  return <CustomTextField label='Default' />
}

export default TextFieldCustom

Variants

Use variant={'filled' | 'standard'} prop with the TextField component for different text fields.

// ** MUI Imports
import TextField from '@mui/material/TextField'

const TextFieldVariant = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <TextField id='outlined-basic' label='Outlined' />
      <TextField id='filled-basic' label='Filled' variant='filled' />
      <TextField id='standard-basic' label='Standard' variant='standard' />
    </form>
  )
}

export default TextFieldVariant

Form Props

Standard form attributes are supported e.g. required, disabled, type, etc. as well as helperText which is used to give context about a field’s input, such as how the input will be used.

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldFormProps = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField required id='form-props-required' label='Required' defaultValue='Hello World' />
      <CustomTextField disabled id='form-props-disabled' label='Disabled' defaultValue='Hello World' />
      <CustomTextField
        type='password'
        label='Password'
        id='form-props-password-input'
        autoComplete='current-password'
      />
      <CustomTextField
        label='Read Only'
        defaultValue='Hello World'
        id='form-props-read-only-input'
        InputProps={{ readOnly: true }}
      />
      <CustomTextField type='number' label='Number' id='form-props-number' InputLabelProps={{ shrink: true }} />
      <CustomTextField
        label='Label'
        placeholder='Placeholder'
        id='form-props-full-width'
        InputLabelProps={{ shrink: true }}
      />
      <CustomTextField id='form-props-search' label='Search field' type='search' />
      <CustomTextField
        label='Helper text'
        id='form-props-helperText'
        defaultValue='Default Value'
        helperText='Some important text'
      />
    </form>
  )
}

export default TextFieldFormProps

Controlled and Uncontrolled

Manage value prop with the help of a state for controlled TextField and usedefaultChecked prop for uncontrolled TextField.

// ** React Imports
import { useState } from 'react'

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldControlledUncontrolled = () => {
  // ** State
  const [name, setName] = useState('Cat in the Hat')

  const handleChange = event => {
    setName(event.target.value)
  }

  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField value={name} label='Controlled' onChange={handleChange} id='controlled-text-field' />
      <CustomTextField id='uncontrolled-text-field' label='Uncontrolled' defaultValue='foo' />
    </form>
  )
}

export default TextFieldControlledUncontrolled

Sizes

Use size prop for different sizes of text fields.

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldSizes = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField label='Size' id='size-small' defaultValue='Small' />
      <CustomTextField label='Size' size='medium' id='size-normal' defaultValue='Medium' />
    </form>
  )
}

export default TextFieldSizes

Color

color={'secondary' | 'success' | 'error' | 'warning' | 'info'} prop changes the highlight color of the text field when focused.

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldColor = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField id='color-secondary' label='Secondary' color='secondary' />
      <CustomTextField id='color-success' label='Success' color='success' />
      <CustomTextField id='color-error' label='Error' color='error' />
      <CustomTextField id='color-warning' label='Warning' color='warning' />
      <CustomTextField id='color-info' label='Info' color='info' />
    </form>
  )
}

export default TextFieldColor

Icons

There are multiple ways to display an icon with a text field.

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import InputAdornment from '@mui/material/InputAdornment'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldIcons = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField
        label='With Adornment'
        id='input-with-icon-textfield'
        InputProps={{
          startAdornment: (
            <InputAdornment position='start'>
              <Icon icon='tabler:user-circle' />
            </InputAdornment>
          )
        }}
      />
      <Box sx={{ display: 'inline-flex' }}>
        <Grid container spacing={2} alignItems='center'>
          <Grid item sx={{ '& svg': { mt: 6, color: 'action.active' } }}>
            <Icon icon='tabler:user-circle' />
          </Grid>
          <Grid item>
            <CustomTextField id='input-with-icon-grid' label='With a grid' />
          </Grid>
        </Grid>
      </Box>
    </form>
  )
}

export default TextFieldIcons

Input Adornment

The main way is with an InputAdornment. This can be used to add a prefix, a suffix or an action to an input. For instance, you can use an icon button to hide or reveal the password.

// ** React Imports
import { useState } from 'react'

// ** MUI Imports
import IconButton from '@mui/material/IconButton'
import InputAdornment from '@mui/material/InputAdornment'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldInputAdornment = () => {
  // ** State
  const [values, setValues] = useState({
    weight: '',
    password: '',
    showPassword: false
  })

  const handleChange = prop => event => {
    setValues({ ...values, [prop]: event.target.value })
  }

  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword })
  }

  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField
        id='icons-start-adornment'
        label='With normal TextField'
        InputProps={{
          startAdornment: <InputAdornment position='start'>Kg</InputAdornment>
        }}
      />
      <CustomTextField
        label='Password'
        value={values.password}
        id='icons-adornment-password'
        onChange={handleChange('password')}
        type={values.showPassword ? 'text' : 'password'}
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <IconButton
                edge='end'
                onClick={handleClickShowPassword}
                onMouseDown={e => e.preventDefault()}
                aria-label='toggle password visibility'
              >
                <Icon fontSize='1.25rem' icon={values.showPassword ? 'tabler:eye' : 'tabler:eye-off'} />
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    </form>
  )
}

export default TextFieldInputAdornment

Layout

fullWidth can be used to make the input take up the full width of its container.

margin prop can be used to alter the vertical spacing of inputs. Using none (default) doesn't apply margins to the FormControl whereas dense and normal do.

// ** MUI Import
import Box from '@mui/material/Box'

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldLayout = () => {
  return (
    <Box noValidate component='form' autoComplete='off' sx={{ display: 'flex', flexWrap: 'wrap' }}>
      <CustomTextField fullWidth label='Full width' id='outlined-full-width' sx={{ mb: 4 }} />
      <CustomTextField
        label='None'
        sx={{ mr: 4 }}
        id='outlined-margin-none'
        defaultValue='Margin None'
        helperText='Some important text'
      />
      <CustomTextField
        label='Dense'
        margin='dense'
        sx={{ mr: 4 }}
        id='outlined-margin-dense'
        defaultValue='Margin Dense'
        helperText='Some important text'
      />
      <CustomTextField
        label='Normal'
        margin='normal'
        id='outlined-margin-normal'
        defaultValue='Margin Normal'
        helperText='Some important text'
      />
    </Box>
  )
}

export default TextFieldLayout

Validation

The error prop toggles the error state, the helperText prop can then be used to provide feedback to the user about the error.

// ** Custom Component Import
import CustomTextField from 'src/@core/components/mui/text-field'

const TextFieldValidation = () => {
  return (
    <form className='demo-space-x' noValidate autoComplete='off'>
      <CustomTextField error id='validation-error' label='Error' defaultValue='Hello World' />
      <CustomTextField
        error
        label='Error'
        defaultValue='Hello World'
        helperText='Incorrect entry.'
        id='validation-error-helper-text'
      />
    </form>
  )
}

export default TextFieldValidation