TextInput

Bidirectionality

TextInputs support right-to-left (RTL) languages. TextInputs with Icons are reversed when the direction theme variable is set to rtl. A subset of Icons that convey directionality will be reversed.

<div dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <DemoLayout>
      <TextInput iconStart={<IconBackspace />} defaultValue="مرحبا بالعالم" />
      <TextInput iconEnd={<IconBackspace />} defaultValue="مرحبا بالعالم" />
      <TextInput variant="success" defaultValue="مرحبا بالعالم" />
    </DemoLayout>
  </ThemeProvider>
</div>