InputGroup

<InputGroup>
  <InputGroupPrepend>
    <InputGroupAddon>
      <Sublabel>$</Sublabel>
    </InputGroupAddon>
  </InputGroupPrepend>
  <TextInput name="my-input" onChange={() => {}} />
  <InputGroupAppend>
    <InputGroupAddon>
      <Sublabel>USD</Sublabel>
    </InputGroupAddon>
  </InputGroupAppend>
</InputGroup>

<InputGroup>
  <TextInput name="my-input" onChange={() => {}} />
  <InputGroupAppend>
    <InputGroupAddon>
      <Icon className="text-blue" icon="calendar" />
    </InputGroupAddon>
  </InputGroupAppend>
</InputGroup>

<State initial={{ leftValue: 'home', rightValue: 'red' }}>
  {({ state, setState }) => (
    <InputGroup>
      <InputGroupPrepend>
        <InputGroupSelect
          name="leftValue"
          options={[
            { label: 'Home', value: 'home' },
            { label: 'Work', value: 'work' },
            { label: 'Personal', value: 'personal' },
          ]}
          onChange={(name, value) => setState({ [name]: value })}
          value={state.leftValue}
        />
      </InputGroupPrepend>
      <TextInput name="my-input" onChange={() => {}} />
      <InputGroupAppend>
        <InputGroupSelect
          name="rightValue"
          options={[
            { label: 'Red', value: 'red' },
            { label: 'Green', value: 'green' },
            { label: 'Blue', value: 'blue' },
          ]}
          onChange={(name, value) => setState({ [name]: value })}
          value={state.rightValue}
        />
      </InputGroupAppend>
    </InputGroup>
  )}
</State>