TextInput

Demos

Default

import { TextInput } from 'sxa-ui'


function Demo() {
  return (
    <TextInput placeholder='Placeholder' />
  )
}

export default Demo

Icon

import { TextInput } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'

function Demo() {
  return (
    <TextInput placeholder='Placeholder' icon={RiArrowRightSLine} />
  )
}

export default Demo

Disabled

import { TextInput } from 'sxa-ui'

function Demo() {
  return (
    <TextInput disabled placeholder='Placeholder' />
  )
}

export default Demo

Icon (Disabled)

import { TextInput } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'

function Demo() {
  return (
    <TextInput disabled placeholder='Placeholder' icon={RiArrowRightSLine} />
  )
}

export default Demo

Prefix and Suffix

import { TextInput } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'

function Demo() {
  return (
    <div>
     <TextInput prefix='EUR' placeholder='Placeholder' icon={RiArrowRightSLine} />
     <TextInput suffix='EUR' placeholder='Placeholder' icon={RiArrowRightSLine} />
     <TextInput prefix='EUR' suffix='EUR' placeholder='Placeholder' icon={RiArrowRightSLine} />
    </div>
  )
}

export default Demo