TextInput

Demos

Text Input

Fullscreen
import { TextInput } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <TextInput placeholder='Placeholder' label='Label' />
      <TextInput
        placeholder='Placeholder'
        label='Label'
        optional='(Optional)'
      />
    </div>
  )
}

export default Demo

Text Input Icon

Fullscreen
import { Icon, TextInput } from 'marketing-ui'
import { IconPin } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <TextInput
        placeholder='Placeholder'
        label='Label'
        icon={<Icon i={IconPin} />}
      />
      <TextInput
        placeholder='Placeholder'
        label='Label'
        optional='(Optional)'
        icon={<Icon i={IconPin} />}
      />
    </div>
  )
}

export default Demo

Text Input Error

Fullscreen
import { Icon, TextInput } from 'marketing-ui'
import { IconPin } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <TextInput
        placeholder='Placeholder'
        label='Label'
        error='Invalid email address'
      />
      <TextInput
        label='Label'
        error='Invalid email address'
        icon={<Icon i={IconPin} />}
        placeholder='Placeholder'
      />
    </div>
  )
}

export default Demo

Text Input Disabled

Fullscreen
import { TextInput } from 'marketing-ui'

function Demo() {
  return <TextInput label='Label' disabled />
}

export default Demo

Props