AIInput

The composer a person types a prompt into: a field that grows with what is written in it, a row of controls under it, and the sheet those controls open.

The field opens one line tall and follows the text up to maxRows. After that it holds its height and scrolls its own content, so the composer cannot grow until the send button is off the bottom of the screen. Five rows is the default.

Nothing here touches the microphone. There is a recording state and it draws a live meter, but the app owns the recorder and passes back a level and a status — which is what keeps the composer free of an audio dependency.

The surfaces ask for the iOS system material and get it on iOS 26 and above. Below that, on Android, and for anyone with Reduce Transparency switched on, they are drawn as solid token surfaces. Both are finished looks; see Glass for why nothing is faked where the material does not exist.

For a plain multi-line field with a label and a character count, use Textarea. For the answer coming back, use Response.

Installation

AIInput ships with the library — no separate install.

import { AIInput, PlusIcon, MicIcon, CameraIcon, GlobeIcon, FileIcon, Text } from 'panelui-native';

Or copy the source into your project, to own and edit it:

npx panelui-cli@latest add ai-input

Usage

<AIInput value={value} onValueChange={setValue} onSubmit={send}>
  <AIInput.Field placeholder="Ask anything" />
  <AIInput.Toolbar>
    <AIInput.Action label="Add" icon={<PlusIcon />} onPress={() => setSheet(true)} />
    <AIInput.Pill label="Sonnet 4.6" detail="High" onPress={() => setModels(true)} />
    <AIInput.Spacer />
    <AIInput.Action label="Dictate" icon={<MicIcon />} onPress={record} />
    <AIInput.Submit />
  </AIInput.Toolbar>
</AIInput>

Composition

<AIInput>
  <AIInput.Field />
  <AIInput.Toolbar>
    <AIInput.Action />
    <AIInput.Pill />
    <AIInput.Spacer />
    <AIInput.Submit />
  </AIInput.Toolbar>
  <AIInput.Recording />
</AIInput>

<AIInput.Sheet>
  <AIInput.Sheet.Screen id="root" title="Add to chat">
    <AIInput.Sheet.Group>
      <AIInput.Sheet.Row />
      <AIInput.Sheet.Toggle />
      <AIInput.Sheet.Choice />
    </AIInput.Sheet.Group>
  </AIInput.Sheet.Screen>
</AIInput.Sheet>

<AIInput.VoiceMode />

• AIInput.Screen — See props below.
• AIInput.Group — See props below.
• AIInput.Row — The field and its controls on a single line, instead of the field above them. The composer at its smallest — a bar that is always on screen rather than the focus of it.
• AIInput.Toggle — See props below.
• AIInput.Choice — See props below.

Examples

Growing, and then scrolling

maxRows is where the field stops. Up to it the composer follows the text; past it the height holds and the field scrolls, which is what keeps the toolbar on screen.

minRows moves the floor if a composer should open taller than one line.

<AIInput value={value} onValueChange={setValue} maxRows={5}>
  <AIInput.Field placeholder="Ask anything" />
  <AIInput.Toolbar>
    <AIInput.Spacer />
    <AIInput.Submit />
  </AIInput.Toolbar>
</AIInput>

On one line

AIInput.Row puts the field between the controls rather than above them, which is the whole composer in one pill.

The field still grows — it grows the row. Reach for it when the composer is always on screen, and for the stacked one when it is what the screen is for.

<AIInput value={value} onValueChange={setValue} onSubmit={send}>
  <AIInput.Row>
    <AIInput.Action label="Add" icon={<PlusIcon />} onPress={add} />
    <AIInput.Field placeholder="Ask anything" />
    <AIInput.Action label="Dictate" icon={<MicIcon />} onPress={record} />
    <AIInput.Submit />
  </AIInput.Row>
</AIInput>

The platform's own controls

native hands a control to the platform, which draws it in its own material — Liquid Glass on iOS 26. The card behind it is still ours, and still glass.

The platform owns their colour, metrics and shape while this is on, so className and the theme tokens stop reaching them, and the row they sit in takes the platform's height rather than the one our own controls would need.

A pill with a detail or an indicator is drawn rather than handed over: only a plain string can go to a native button, because a hosted view inside one has no width anything can resolve.

<AIInput native value={value} onValueChange={setValue}>
  <AIInput.Field />
  <AIInput.Toolbar>
    <AIInput.Action label="Add" icon={<PlusIcon />} onPress={add} />
    <AIInput.Pill label="Sonnet 4.6" accessibilityLabel="Change model" />
    <AIInput.Spacer />
    <AIInput.Submit />
  </AIInput.Toolbar>
</AIInput>

One button, three jobs

AIInput.Submit reads status and whether anything has been typed, and offers the one thing that is worth doing: voice mode on an empty composer, send once there is a prompt, stop while the answer is arriving.

One control rather than three, because a row of dimmed siblings is a row of things that look broken.

<AIInput
  value={value}
  onValueChange={setValue}
  status={status}
  onSubmit={send}
  onStop={stop}
  onVoice={() => router.push('/voice')}
>
  <AIInput.Field />
  <AIInput.Toolbar>
    <AIInput.Spacer />
    <AIInput.Submit />
  </AIInput.Toolbar>
</AIInput>

Recording, without a recorder

The composer draws the meter; the app runs the recorder. Pass a Reanimated shared value as level and metering arriving every 30ms never re-renders anything above the composer.

With no level at all the meter animates plausible motion, so the screen can be built before any audio exists.

const level = useSharedValue(0);

<AIInput status={recording ? 'recording' : 'ready'} level={level}
  onRecordCancel={discard} onRecordConfirm={transcribe}>
  <AIInput.Field placeholder="Chat with the model" />
  {recording ? <AIInput.Recording /> : (
    <AIInput.Toolbar>
      <AIInput.Spacer />
      <AIInput.Action label="Dictate" icon={<MicIcon />} onPress={start} />
      <AIInput.Submit />
    </AIInput.Toolbar>
  )}
</AIInput>

A sheet that goes deeper

A row with to pushes the screen with that id onto the same sheet. The sheet stays where it is, the close button becomes a back button, and the body slides — which is what makes one level deeper read as the same surface rather than another one landing on top.

The sheet forgets where it was when it closes, so reopening always starts at the first screen.

<AIInput.Sheet open={open} onOpenChange={setOpen}>
  <AIInput.Sheet.Screen id="root" title="Add to chat">
    <AIInput.Sheet.Group>
      <AIInput.Sheet.Row icon={<FileIcon />} label="Add files" onPress={pick} />
    </AIInput.Sheet.Group>
    <AIInput.Sheet.Group>
      <AIInput.Sheet.Row label="Add to project" value={project ?? 'None'} to="project" />
      <AIInput.Sheet.Row label="Tool access" value={tools} to="tools" />
    </AIInput.Sheet.Group>
    <AIInput.Sheet.Group>
      <AIInput.Sheet.Toggle icon={<GlobeIcon />} label="Web search"
        value={web} onValueChange={setWeb} />
    </AIInput.Sheet.Group>
  </AIInput.Sheet.Screen>

  <AIInput.Sheet.Screen id="tools" title="Tool access">
    <AIInput.Sheet.Group>
      {TOOL_MODES.map((mode) => (
        <AIInput.Sheet.Choice
          key={mode.id}
          label={mode.label}
          description={mode.description}
          selected={tools === mode.id}
          onPress={() => setTools(mode.id)}
        />
      ))}
    </AIInput.Sheet.Group>
  </AIInput.Sheet.Screen>
</AIInput.Sheet>

An action in the header

trailing on a screen puts a second control at the far end of the header. The leading end belongs to the sheet, which draws a close button on the first screen and a back button on every screen pushed onto it.

<AIInput.Sheet.Screen
  id="project"
  title="Add to project"
  trailing={<AIInput.Action label="New project" icon={<PlusIcon />} onPress={create} />}
>
  <AIInput.Sheet.Group>
    {projects.map((project) => (
      <AIInput.Sheet.Row key={project.id} label={project.name}
        description={project.updated} onPress={() => choose(project)} />
    ))}
  </AIInput.Sheet.Group>
</AIInput.Sheet.Screen>

Versions

In a chat

The composer docked above the keyboard, over a transcript. The page behind does not move — the composer travels with the keyboard instead.

<View className="flex-1">
  <MessageScroller>{turns}</MessageScroller>
  <AIInput value={value} onValueChange={setValue} onSubmit={send} keyboardBottomInset={insets.bottom}>
    <AIInput.Field placeholder="Chat with the model" />
    <AIInput.Toolbar>
      <AIInput.Action label="Add" icon={<PlusIcon />} onPress={() => setSheet(true)} />
      <AIInput.Pill label="Sonnet 4.6" detail="High" onPress={() => setModels(true)} />
      <AIInput.Spacer />
      <AIInput.Submit />
    </AIInput.Toolbar>
  </AIInput>
</View>

The sheet it opens

Three screens on one sheet: what can be added to the chat, the project it belongs to, and how much of the toolbox the model is given.

<AIInput.Sheet open={open} onOpenChange={setOpen}>
  <AIInput.Sheet.Screen id="root" title="Add to chat" trailing={<Text muted>All photos</Text>}>
    …
  </AIInput.Sheet.Screen>
  <AIInput.Sheet.Screen id="project" title="Add to project">…</AIInput.Sheet.Screen>
  <AIInput.Sheet.Screen id="tools" title="Tool access">…</AIInput.Sheet.Screen>
</AIInput.Sheet>

Voice mode

The screen with no field on it. The wash behind everything and the capsules over the microphone are the same meter the composer draws, given the whole screen.

<AIInput.VoiceMode
  state={state}
  level={level}
  title="Start chatting anytime"
  onMicPress={toggleMute}
  onClose={() => router.back()}
>
  <AIInput.Action label="Add" icon={<PlusIcon />} onPress={add} />
  <AIInput.Pill label="Sonnet" indicator={<ChevronsUpDownIcon size={14} />} onPress={models} />
</AIInput.VoiceMode>

Variants

size

• sm
• md (default)
• lg

<AIInput size="sm">…</AIInput>
<AIInput size="md">…</AIInput>
<AIInput size="lg">…</AIInput>

API Reference

AIInput

AIInput.Field

AIInput.Row

AIInput.Toolbar

AIInput.Action

AIInput.Pill

AIInput.Submit

AIInput.Recording

AIInput.SheetScreen

AIInput.Sheet

AIInput.SheetGroup

AIInput.SheetRow

AIInput.SheetToggle

AIInput.SheetChoice

AIInput.VoiceMode

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

The field stops at maxRows and scrolls. The toolbar stays at the bottom of the box, so a long prompt never pushes the send button off the screen.

The trailing button is inert when there is nothing to do. With no text it offers voice mode, and only if the app took an onVoice; without one it stays disabled until something is typed, rather than looking live and doing nothing. The same goes for onStop while streaming.

onSubmit does not clear the field. The composer does not know whether the send succeeded; clear value yourself once it has.

Glass needs iOS 26. Everywhere else the surfaces are solid, which is a finished look rather than a fallback. Nothing is faked on Android.

A native row is the platform's height, not ours. A control handed over is hosted, and a hosted view only lays out where something above it is fixed on both axes. The platform frames its icon buttons at 44pt, so a row carrying them takes a definite height of its own — a shorter row is one its controls hang out of, over the field above them. The drawn controls are smaller and are laid out by the row itself, so this applies only once native is on.

avoidKeyboard is a component boundary, not a flag. Turning it off means the keyboard hook is never called at all — calling it has global consequences, and a composer that was told not to avoid the keyboard must not impose that on every other screen.

The sheet is a solid surface, not a material. It covers most of the screen, so there is almost nothing behind it left to refract. The composer keeps the glass, because a bar floating over a page is the case the material is for.

A sheet row's to names a screen id, not a route. It pushes onto the same sheet; nothing navigates.

Public exports

Values: AIInput

Types: AIInputProps, AIInputStatus, AIInputFieldProps, AIInputRowProps, AIInputToolbarProps, AIInputActionProps, AIInputPillProps, AIInputSubmitProps, AIInputRecordingProps, AIInputSheetProps, AIInputSheetScreenProps, AIInputSheetGroupProps, AIInputSheetRowProps, AIInputSheetToggleProps, AIInputSheetChoiceProps, AIInputVoiceModeProps