Xaui v0.9.1-beta.99

BetaForms

DummyField

A field container styled identically to a text input (TextField), but non-editable and pressable. Designed as a trigger for pickers, modals, bottom sheets, menus, or file selection — or for presenting a read-only field value that can be tapped.

Source Markdown

Overview

A field container styled identically to a text input (TextField), but non-editable and pressable. Designed as a trigger for pickers, modals, bottom sheets, menus, or file selection — or for presenting a read-only field value that can be tapped.

Renamed from legacy InputTrigger to match the *Field vocabulary (TextField, MaskField, NumberField, TimeField) and avoid clashing with the *.Trigger slot vocabulary of overlay compounds (Select.Trigger, Popover.Trigger, Menu.Trigger).

First example

<DummyField onPress={openCountrySheet}>
  <DummyField.Label>Country</DummyField.Label>
  <DummyField.Field placeholder="Select country">{selectedCountry}</DummyField.Field>
  <DummyField.Description>Where you reside.</DummyField.Description>
</DummyField>

Anatomy

The root is the column (DummyFieldRoot), not the field. It renders the outer View that stacks DummyField.Label, DummyField.Field, DummyField.Description, and DummyField.Error.
DummyField.Field is the pressable control. It renders a PressableFeedback, forwards refs, applies pressed styling, and receives touch interactions.
DummyField.Value is the content text. It renders the selected text or the placeholder in fieldPlaceholder colour when empty.
DummyField.Indicator is the affordance glyph. Defaults to ChevronDownIcon and inherits glyph size and color from the resolved recipe context.

Usage

Basic trigger

<DummyField onPress={openCountrySheet}>
  <DummyField.Label>Country</DummyField.Label>
  <DummyField.Field placeholder="Select country">{selectedCountry}</DummyField.Field>
  <DummyField.Description>Where you reside.</DummyField.Description>
</DummyField>

Composed with Indicator

<DummyField onPress={openDatePicker}>
  <DummyField.Label>Appointment date</DummyField.Label>
  <DummyField.Field>
    <DummyField.Value placeholder="Pick a date">{appointmentDate}</DummyField.Value>
    <DummyField.Indicator />
  </DummyField.Field>
</DummyField>

Inside label

<DummyField labelPlacement="inside" onPress={openPicker}>
  <DummyField.Label>Category</DummyField.Label>
  <DummyField.Field placeholder="Choose category">{category}</DummyField.Field>
</DummyField>

Inside a `FieldGroup`

<DummyField onPress={pickFile}>
  <DummyField.Label>Attachment</DummyField.Label>
  <FieldGroup>
    <FieldGroup.Prefix isDecorative>
      <Icon as={FileIcon} />
    </FieldGroup.Prefix>
    <DummyField.Field placeholder="Select a file..." />
    <FieldGroup.Suffix>
      <Icon as={UploadIcon} />
    </FieldGroup.Suffix>
  </FieldGroup>
</DummyField>

Root props

DummyFieldProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
variant	`DummyFieldVariant \| undefined`	No	—
size	`Size \| undefined`	No	The field's height, its padding, the gaps and the type. Never width.
radius	`RadiusKey \| undefined`	No	Overrides the `field` radius the theme chose for every size.
labelPlacement	`DummyFieldLabelPlacement \| undefined`	No	Above the box, or lifted into it.
color	`string \| undefined`	No	A raw tint (`'#7c3aed'`), never a token (R7).
isInvalid	`boolean \| undefined`	No	Paints the border, label and description in `danger`.
isDisabled	`boolean \| undefined`	No	Dims the field and prevents interaction.
onPress	`((event: GestureResponderEvent) => void) \| undefined`	No	Optional press handler on the field. Composed with `DummyField.Field`'s `onPress`.
style	`StyleProp<ViewStyle>`	No	—
children	`ReactNode`	No	—
asChild	`boolean \| undefined`	No	R12 — merge into the single child instead of rendering a `View`.

Slots

DummyFieldDescriptionProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

DummyFieldErrorProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

DummyFieldFieldProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
placeholder	`string \| undefined`	No	Placeholder text shown when no value or child is provided.
value	`ReactNode`	No	Value displayed inside the field if not passed as children.
asChild	`boolean \| undefined`	No	—
children	`ReactNode`	No	—

DummyFieldIndicatorProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
as	`ComponentType<IconComponentProps> \| undefined`	No	Custom icon component. Defaults to `ChevronDownIcon`.

DummyFieldLabelProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—

DummyFieldValueProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
placeholder	`string \| undefined`	No	—
children	`ReactNode`	No	—

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

The source defines no extra rule. Keep the React Native labels, roles, states and focus order your case needs, then check the result with VoiceOver and TalkBack.

Migration from legacy

This component declares no rule of its own. The migration guide covers variants, colours and slots.