Textbox Affix

A Textbox Affix allows you to add a text to the left or right of a textbox.

Component preview

Prefixhttps://Suffix@iyk.app

import * as UI from "@iyk/ui"

export default () => (
  <UI.Fieldset>
    <UI.Field name="prefix">
      <UI.Label>Prefix</UI.Label>

      <UI.TextboxAffix text="https://" type="prefix">
        <UI.Textbox />
      </UI.TextboxAffix>
    </UI.Field>
    <UI.Field name="suffix">
      <UI.Label>Suffix</UI.Label>

      <UI.TextboxAffix text="@iyk.app" type="suffix">
        <UI.Textbox />
      </UI.TextboxAffix>
    </UI.Field>
  </UI.Fieldset>
)

Props

text

string

The text to add inside the Affix

type

"prefix" | "suffix"

The position of the Affix