Literal UI

import { TextField } from '@literal-ui/core'import { TextField } from '@literal-ui/core'

variant: "filled" | "outlined"variant: "filled" | "outlined"

<TextField variant={variant} name={variant} />
<TextField variant={variant} name={variant} />

Icon?: IconTypeIcon?: IconType

<TextField variant={variant} name={variant} Icon={MdSearch} />
<TextField variant={variant} name={variant} Icon={MdSearch} />

[controlled]: boolean[controlled]: boolean

value: 
const [value, setValue] = useState('')

<TextField
  variant="filled"
  name="uncontrolled"
  defaultValue="default"
/>

<TextField
  variant="filled"
  name="controlled"
  onChange={(e) => setValue(e.target.value)}
  value={value}
  message={`value: ${value}`}
/>
const [value, setValue] = useState('')

<TextField
  variant="filled"
  name="uncontrolled"
  defaultValue="default"
/>

<TextField
  variant="filled"
  name="controlled"
  onChange={(e) => setValue(e.target.value)}
  value={value}
  message={`value: ${value}`}
/>

disabled?: booleandisabled?: boolean

outlined
<TextField
  variant={variant}
  name={variant}
  Icon={MdSearch}
  defaultValue="default"
  disabled
/>
<TextField
  variant={variant}
  name={variant}
  Icon={MdSearch}
  defaultValue="default"
  disabled
/>

error?: booleanerror?: boolean

error
outlined
error
<TextField
  variant={variant}
  name={variant}
  Icon={MdSearch}
  defaultValue="default"
  message="error"
  error
/>
<TextField
  variant={variant}
  name={variant}
  Icon={MdSearch}
  defaultValue="default"
  message="error"
  error
/>