Text Input

import { TextInput } from '@micode-ui/react';
 
<TextInput.Root>
  <TextInput.LeftIcon>{/* Your Icon */}</TextInput.LeftIcon>
  <TextInput.Input placeholder='Type some text...' />
  <TextInput.RightIcon
    activeIcon={/* Icon when text is visible */}
    inactiveIcon={/* Icon when text not visible */}
  />
</TextInput.Root>;

<Box
  css={{
    display: 'flex',
    flexDirection: 'column',
    background: 'transparent',
    gap: '$2'
  }}
>
  <TextInput.Root>
    <TextInput.LeftIcon>
      <User weight='bold' />
    </TextInput.LeftIcon>
    <TextInput.Input placeholder='Type your username...' />
  </TextInput.Root>
  <TextInput.Root>
    <TextInput.LeftIcon>
      <Envelope weight='bold' />
    </TextInput.LeftIcon>
    <TextInput.Input placeholder='Type your password...' type='password' />
    <TextInput.RightIcon
      activeIcon={<Eye weight='bold' />}
      inactiveIcon={<EyeSlash weight='bold' />}
    />
  </TextInput.Root>
</Box>