TextInput

The TextInput component is an HTML input with some extra markup to support more advanced styles, like icons.

Base TextInput

<Column gap="medium">
  <TextInput
    value=""
    placeholder="Placeholder text input"
    onValueChange={() => {}}
  />
  <TextInput value="Text input" onValueChange={() => {}} />
  <TextInput
    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
    value="Text input"
    onValueChange={() => {}}
  />
  <TextInput
    value="Text input"
    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
    addOnPosition="end"
    placeholder="Placeholder text input"
    onValueChange={() => {}}
  />
</Column>

Bare TextInput

<Column gap="medium">
  <TextInput
    bare
    value=""
    placeholder="Placeholder text input"
    onValueChange={() => {}}
  />
  <TextInput bare value="Text input" onValueChange={() => {}} />
  <TextInput
    bare
    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
    value="Text input"
    onValueChange={() => {}}
  />
  <TextInput
    bare
    value="Text input"
    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
    addOnPosition="end"
    placeholder="Placeholder text input"
    onValueChange={() => {}}
  />
</Column>