CTI DESIGN

Text Input

Text Input is the main component used for data entry

Text Input Base

<TextInput
  placeholder='This is a placeholder'
  name='name'
/>

Text Input Large

<TextInput
  placeholder='This is a placeholder'
  name='name'
  size='large'
/>

Text Input With Label

This is a label

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
/>

Text Input With Leading Icon

This is a label

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  icon={HiMail}
/>

Text Input With Trailing Icon

This is a label

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  icon={HiMail}
  iconRight={true}
  onIconClick={() => console.log('icon clicked')}
/>

Text Input With Error

This is a label

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  error={true}
/>

Text Input Error With Helper

This is a label

This is a helper text

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  error={true}
  helper='This is a helper text'
/>

Text Input Error Helper With Icon

This is a label

This is a helper text

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  error={true}
  helper='This is a helper text'
  icon={MdError}
  iconRight={true}
/>

Text Input Squared

This is a label

<TextInput
  placeholder='This is a placeholder'
  name='name'
  label='This is a label'
  squared='top'
/>

Password Input

Password

<TextInput
  placeholder='Enter your password'
  name='password'
  label='Password'
  type={pwdDynamicVisible ? 'text' : 'password'}
  icon={pwdDynamicVisible ? HiEyeOff : HiEye}
  onIconClick={() => setPwdVisible(!pwdDynamicVisible)}
  trailingIcon={true}
/>

Login Input Group

<div className='flex flex-col -space-y-1.5'>
  <TextInput placeholder='Enter your username' name='username' squared='bottom' />

  <div className='pt-px'>
    <TextInput
      placeholder='Enter your password'
      name='password'
      squared='top'
      type={pwdVisible ? 'text' : 'password'}
      icon={pwdVisible ? HiEyeOff : HiEye}
      onIconClick={() => setPwdVisible(!pwdVisible)}
      trailingIcon={true}
    />
  </div>
</div>