# Select

## Summary

Select presents a defined list of options and lets the user pick a single value.
Use it when the choice is one of a known, reasonably short list that lives
inside a form. For longer lists or free-text search, use
[Autocomplete](/components/Autocomplete); for triggering an action rather than
picking a value, use [Menu](/components/Menu).

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectBasicExample() {
  const [value, setValue] = useState<string | undefined>("active");

  return (
    <Select label="Status" value={value} onValueChange={setValue}>
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

## Anatomy

| Part          | Description                                                                                                                         |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Trigger       | The field the user clicks to open the list                                                                                          |
| Label         | Names the field. Sits inside the trigger when empty, floats to a mini-label once a value is chosen. Doubles as the empty-state hint |
| Value         | The selected option, shown inside the trigger                                                                                       |
| Dropdown      | The floating panel of options on large screens                                                                                      |
| Bottom sheet  | The panel of options on small screens (≤490px). Automatic                                                                           |
| Item          | An individual option in the list                                                                                                    |
| Group         | Optional — wraps related items under a shared heading                                                                               |
| Group label   | Optional — the heading shown above a group                                                                                          |
| Separator     | Optional — a divider between items outside of groups                                                                                |
| Description   | Optional — helper text shown beneath the field                                                                                      |
| Error message | Optional — replaces the description while an error is present                                                                       |

## Behaviour

#### Label as placeholder

The `label` names the field and doubles as the empty state. While no value is
selected it sits centered inside the trigger; once the user picks an option it
floats up as a mini-label. There is no separate `placeholder` prop — the label
fills that role.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectEmptyExample() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <Select label="Status" value={value} onValueChange={setValue}>
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

#### Selected value display

The closed trigger shows the selected `value`, capitalized (e.g. `"active"` →
`"Active"`). It does **not** read the item's children. When the display label
differs from the capitalized value, pass `renderValue` to control what the
trigger shows — otherwise the trigger will silently drift from the list.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

const PRIORITY_LABELS: Record<string, string> = {
  low: "Low priority",
  medium: "Medium priority",
  high: "High priority",
};

export function SelectRenderValueExample() {
  const [value, setValue] = useState<string | undefined>("high");

  return (
    <Select
      label="Priority"
      value={value}
      onValueChange={setValue}
      renderValue={selected => PRIORITY_LABELS[selected]}
    >
      <Select.Item value="low">Low</Select.Item>
      <Select.Item value="medium">Medium</Select.Item>
      <Select.Item value="high">High</Select.Item>
    </Select>
  );
}
```

#### Small screens

On viewports ≤490px the options open as a bottom sheet instead of an anchored
dropdown, matching the pattern used by [Menu](/components/Menu) and
[Dialog](/components/Dialog). This is automatic — the same authored child tree
renders on both. Resize the preview narrow to see the sheet.

#### Controlled only

Select is controlled: always pass `value` and `onValueChange`. There is no
uncontrolled `defaultValue`. The change prop is named `onValueChange` (not
`onChange`) to match the Base UI foundation and to encode the payload — the
value, not an event — in its name. See [Content guidelines](#content-guidelines)
for how this affects form-library wiring.

#### Grouping

Organize related options under section headers with `Select.Group` and
`Select.GroupLabel`. Adjacent groups are divided automatically, so you don't
need a `Select.Separator` between them — reach for `Select.Separator` only to
divide items that sit outside groups.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectGroupedExample() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <Select label="Produce" value={value} onValueChange={setValue}>
      <Select.Group>
        <Select.GroupLabel>Fruits</Select.GroupLabel>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="banana">Banana</Select.Item>
      </Select.Group>
      <Select.Group>
        <Select.GroupLabel>Vegetables</Select.GroupLabel>
        <Select.Item value="carrot">Carrot</Select.Item>
        <Select.Item value="spinach">Spinach</Select.Item>
      </Select.Group>
    </Select>
  );
}
```

#### States

* **Description** — pass `description` to add supporting help text beneath the
  field.
* **Error** — pass an `error` message to mark the field invalid and show the
  message beneath the field. The error replaces the description while it is
  present.
* **Invalid without a message** — use `invalid` on its own to apply the invalid
  styling without a message, for example when a form library renders the error
  text itself.
* **Disabled** — set `disabled` to prevent interaction with the field.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectDescriptionExample() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <Select
      label="Status"
      description="This controls who can see the record."
      value={value}
      onValueChange={setValue}
    >
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectErrorExample() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <Select
      label="Status"
      description="This controls who can see the record."
      error="Please choose a status."
      value={value}
      onValueChange={setValue}
    >
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

```tsx
import React from "react";
import { Select } from "@jobber/components/Select";

export function SelectDisabledExample() {
  return (
    <Select label="Status" disabled value="active">
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

## Variants

### Sizes

Use `size="small"` for tighter layouts. The floating mini-label is hidden at the
small size, so the compact control keeps a single-line height. Prefer the
default (large) size in forms so the label remains visible after selection.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectSizeExample() {
  const [value, setValue] = useState<string | undefined>("active");

  return (
    <Select label="Status" size="small" value={value} onValueChange={setValue}>
      <Select.Item value="active">Active</Select.Item>
      <Select.Item value="archived">Archived</Select.Item>
      <Select.Item value="draft">Draft</Select.Item>
    </Select>
  );
}
```

### Inline

Set `inline` to embed the Select within a line of text. The description and
error messaging are suppressed in inline mode, so pair it with validation that
lives elsewhere in the surrounding sentence or paragraph.

```tsx
import React, { useState } from "react";
import { Select } from "@jobber/components/Select";

export function SelectInlineExample() {
  const [value, setValue] = useState<string | undefined>("active");

  return (
    <div>
      Set the record to{" "}
      <Select label="Status" inline value={value} onValueChange={setValue}>
        <Select.Item value="active">Active</Select.Item>
        <Select.Item value="archived">Archived</Select.Item>
        <Select.Item value="draft">Draft</Select.Item>
      </Select>{" "}
      today.
    </div>
  );
}
```

## Content guidelines

Option labels are scanned quickly while the list is open and then read back as
the chosen value once it's closed so they have to work in both places. And
because the `label` prop doubles as the empty-state hint, it has to work as a
field name and as an invitation to pick.

#### Sentence case

Option labels and group labels are sentence-cased. Capitalize only the first
letter unless there is a proper noun (a person's name, a brand). Jobber features
like jobs, quotes, and invoices are not proper nouns.

| ✅ Do              | ❌ Don't           |
| ----------------- | ----------------- |
| Credit/debit card | Credit/Debit Card |
| Bank transfer     | BANK TRANSFER     |
| Authorize.net     | authorize.net     |
| Jasmine Williams  | jasmine williams  |

#### Noun-first labels

Select options represent things the user is picking, not actions they're taking.
Lead with the noun. If a label reads like an imperative verb phrase, reach for
[Menu](/components/Menu) or a set of buttons instead.

| ✅ Do    | ❌ Don't              |
| ------- | -------------------- |
| Cash    | Paid by cash         |
| Draft   | Save as draft        |
| Overdue | Show overdue only    |
| Active  | Set status to active |

#### Keep labels short and parallel

Aim for 1–3 words. Every item in the same list should follow the same
grammatical shape.

| ✅ Do                               | ❌ Don't                                              |
| ---------------------------------- | ---------------------------------------------------- |
| Small / Medium / Large             | Small / 12px / Large                                 |
| Draft / Sent / Paid                | Draft / Sent to client / Payment received            |
| Bank transfer / Credit card / Cash | Bank transfer / Charge to credit card / Cash on hand |

#### The `label` prop names the field and is the empty state

The `label` is both the field heading and, before a value is picked, the
placeholder inside the trigger. Use a noun or short noun phrase (1–3 words).
Don't include the word "Select" or "Choose"; the field itself is the invitation.

| ✅ Do           | ❌ Don't                     |
| -------------- | --------------------------- |
| Payment method | Select a payment method     |
| Status         | Choose a status             |
| Team member    | Please assign a team member |

#### Don't repeat the label in every option

The `label` already names the category. Repeating it in each option adds noise
and eats horizontal space in the trigger. With a `label` of "Payment method":

| ✅ Do       | ❌ Don't               |
| ---------- | --------------------- |
| Cash       | Cash payment method   |
| Cheque     | Cheque payment method |
| E-transfer | Payment by e-transfer |

#### Group labels describe, don't instruct

Keep group labels to 1–2 words that name the category. Don't phrase them as
prompts to the user.

| ✅ Do            | ❌ Don't                   |
| --------------- | ------------------------- |
| Jobber Payments | Payments through Jobber   |
| Manual entry    | Record a payment manually |
| Active          | Currently active statuses |

#### Use `renderValue` when the trigger should differ from the item

By default the trigger shows the selected `value` capitalized. Pass
`renderValue` when the item label carries detail the trigger doesn't need, when
the underlying value is a raw enum, or when items include an icon or adornment.
The item shows what the user is choosing between; the trigger
shows what they chose.

| Scenario                        | Item label                    | `renderValue` returns |
| ------------------------------- | ----------------------------- | --------------------- |
| Item has qualifying detail      | `High — needs response today` | `High`                |
| Item includes an icon adornment | `🔒 Private`                  | `Private`             |

## Do's and Don'ts

#### Do:

* ✅ Use sentence case for option and group labels
* ✅ Pass `renderValue` whenever the item label differs from the capitalized
  `value`
* ✅ Wire `value`, `onValueChange`, `onBlur`, and `ref` explicitly when using a
  form library
* ✅ Group options with `Select.Group` + `Select.GroupLabel` when they fall into
  two or more categories
* ✅ Reach for [Autocomplete](/components/Autocomplete) instead when the list is
  long or benefits from typeahead

#### Don't:

* ❌ Don't spread a React Hook Form `field` object into Select — `onValueChange`
  won't wire from `field.onChange` and the field will silently stop updating
* ❌ Don't include "Select" or "Choose" in the `label` — the field itself is the
  invitation
* ❌ Don't mix noun options and verb options in the same list; if the items are
  actions, use [Menu](/components/Menu) instead
* ❌ Don't repeat the field's label as a prefix in every option
* ❌ Don't assume the trigger shows the item's children — it shows the `value`,
  capitalized, unless you pass `renderValue`

## Accessibility

Select is built on Base UI's `Field` and `Select` primitives, which handle label
wiring, ARIA state, and the interaction model.

#### Keyboard navigation

| Key                | Behaviour                                                           |
| ------------------ | ------------------------------------------------------------------- |
| Tab                | Moves focus to the trigger                                          |
| Enter or Space     | Opens the dropdown / bottom sheet                                   |
| Up and Down arrows | Move through the list. Wrap at the ends                             |
| Home / End         | Jump to the first or last option                                    |
| Enter              | Selects the highlighted option and closes                           |
| Esc                | Closes without selecting                                            |
| Type-to-select     | Typing letters jumps to the next option starting with those letters |

#### Screen readers

The `label` is wired to the trigger via `Field.Label`, so screen readers
announce the field's purpose along with the selected value. When `error` or
`invalid` is set, the field is announced as invalid; the `error` message is
associated with the field so it is read after the label.

#### Focus management

Select exposes an imperative `ref.focus()` handle that moves focus to the
trigger. Use it to implement focus-on-error in a form — for example, focusing
the first invalid Select when the SP tries to submit.

#### Touch targets

On small screens (≤490px) the options open as a bottom sheet, so each item gets
the vertical space needed to hit standard touch-target sizing. No per-item
configuration required.

## Related components

* Use [LegacySelect](/components/LegacySelect) if you are working in an app that
  has not yet migrated off the previous native `<select>`-based implementation.
* Use [Autocomplete](/components/Autocomplete) when the list is long, needs
  typeahead search, or when the user might type a value that isn't in the list.
* Use [Menu](/components/Menu) when the choice triggers an action rather than
  picking a value that persists in the form.
* Use [RadioGroup](/components/RadioGroup) when the set of options is small
  (roughly five or fewer) and it helps the SP to see all of them at once.


## Component customization

Select is intentionally opinionated: it exposes a curated set of props rather
than the full underlying API. The subcomponents (`Select.Item`, `Select.Group`,
`Select.GroupLabel`, `Select.Separator`) accept `className` and `style` for
per-option styling; reach out to UXF if you need behaviour beyond what the props
provide.

## Using with a form library

Select is form-library-agnostic — it exposes plain controlled props, so any
system (React Hook Form, Formik, TanStack Form, or plain `useState`) drives it
by wiring:

* `value` — the current value
* `onValueChange` — the library's value setter
* `onBlur` / `onFocus` — touched state and blur/focus-mode validation
* `error` (message) or `invalid` (styling only) — validation feedback
* `ref` — exposes `focus()`, so a form can focus this field on error

Because the change prop is `onValueChange` (not `onChange`), spreading a field
object whose handler is named `onChange` — for example React Hook Form's `field`
via `<Select {...field} />` — will **not** wire up the change handler.
`field.onChange` lands on a prop nothing reads, and JSX spread does not error,
so the field silently stops updating. Wire the props explicitly instead:

```tsx
<Controller
  control={control}
  name="status"
  render={({ field }) => (
    <Select
      label="Status"
      name={field.name}
      value={field.value}
      onValueChange={field.onChange}
      onBlur={field.onBlur}
      ref={field.ref}
    >
      {/* Select.Item options */}
    </Select>
  )}
/>
```

If you want spread ergonomics, keep the remap in your own app — the design
system intentionally ships no form-library adapter:

```tsx
// app-side helper, not part of @jobber/components
const toValueField = ({ onChange, ...field }) => ({
  ...field,
  onValueChange: onChange,
});

<Select label="Status" {...toValueField(field)}>
  {/* Select.Item options */}
</Select>;
```

> **Note:** Select is built on Base UI's `Field` primitive, but it is not yet
> wired to participate in a surrounding Base UI `<Form>` — the `Form` `errors`
> prop and `Form`-driven focus-on-error do not reach Select. Drive validation
> through the `error` / `invalid` props for now.


## Props

### Mobile

#### Option

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `string` | Yes | — | Text that shows up as the option |
| `value` | `string` | Yes | — | The value that gets returned when an option is selected |

#### Select

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactElement<SelectOption, string | JSXElementConstructor<any>>[]` | Yes | — | The options to select from |
| `accessibilityHint` | `string` | No | — | Helps users understand what will happen when they perform an action |
| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the element |
| `assistiveText` | `string` | No | — | Help text shown below the control. |
| `defaultValue` | `string` | No | — | Default value for when the component is uncontrolled |
| `disabled` | `boolean` | No | — | Disables input selection |
| `invalid` | `boolean` | No | — | Indicates the current selection is invalid |
| `label` | `string` | No | — | Label text shown above the selection. |
| `name` | `string` | No | — | Name of the input. |
| `onChange` | `(newValue?: string) => void` | No | — | Callback that provides the new value when the selection changes |
| `placeholder` | `string` | No | — | Adds a first option to let users select a "no value". Placeholder item selected by default until a selection is made. |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `validations` | `RegisterOptions` | No | — | The validations that will mark this component as invalid |
| `value` | `string` | No | — | Current value of the component |

#### Select.Content

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `align` | `"center" | "end" | "start"` | No | — |  |
| `alignOffset` | `number` | No | — |  |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `avoidCollisions` | `boolean` | No | — |  |
| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
| `collisionBoundary` | `Element | Element[]` | No | — | Platform: WEB ONLY |
| `disablePositioningStyle` | `boolean` | No | — | Platform: NATIVE ONLY |
| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
| `forceMount` | `true` | No | — |  |
| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
| `hideWhenDetached` | `boolean` | No | — | Platform: WEB ONLY |
| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `insets` | `Insets` | No | — |  |
| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
| `loop` | `boolean` | No | — | Platform: WEB ONLY |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
| `onCloseAutoFocus` | `(event: Event) => void` | No | — | Platform: WEB ONLY |
| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | No | — | Platform: WEB ONLY |
| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | — | Platform: WEB ONLY |
| `onInteractOutside` | `(event: PointerDownOutsideEvent | FocusOutsideEvent) => void` | No | — | Platform: WEB ONLY |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | — | Platform: WEB ONLY |
| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
| `position` | `"item-aligned" | "popper"` | No | — | Platform: WEB ONLY |
| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
| `side` | `"bottom" | "top"` | No | — |  |
| `sideOffset` | `number` | No | — |  |
| `sticky` | `"always" | "partial"` | No | — | Platform: WEB ONLY |
| `style` | `StyleProp<ViewStyle>` | No | — |  |
| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |

#### Select.Group

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
| `style` | `StyleProp<ViewStyle>` | No | — |  |
| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |

#### Select.GroupLabel

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `adjustsFontSizeToFit` | `boolean` | No | — | Specifies whether font should be scaled down automatically to fit given style constraints. |
| `allowFontScaling` | `boolean` | No | — | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. |
| `android_hyphenationFrequency` | `"full" | "none" | "normal"` | No | — | Hyphenation strategy |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `dataDetectorType` | `"all" | "email" | "link" | "none" | "phoneNumber"` | No | — | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
| `disabled` | `boolean` | No | — | Specifies the disabled state of the text view for testing purposes. |
| `dynamicTypeRamp` | `"body" | "callout" | "caption1" | "caption2" | "footnote" | "headline" | "largeTitle" | "subheadline" | "title1" | "title2" | "title3"` | No | — | The Dynamic Type scale ramp to apply to this element on iOS. |
| `ellipsizeMode` | `"clip" | "head" | "middle" | "tail"` | No | — | This can be one of the following values:  - `head` - The line is displayed so that the end fits in the container and ... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `lineBreakMode` | `"clip" | "head" | "middle" | "tail"` | No | — | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
| `lineBreakStrategyIOS` | `"hangul-word" | "none" | "push-out" | "standard"` | No | — | Set line break strategy on iOS. |
| `maxFontSizeMultiplier` | `number` | No | — | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined... |
| `minimumFontScale` | `number` | No | — | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `numberOfLines` | `number` | No | — | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the to... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onLongPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on long press. e.g., `onLongPress={this.increaseSize}>` |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on press. Text intrinsically supports press handling with a default highlight state (which ca... |
| `onPressIn` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onPressOut` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTextLayout` | `(event: TextLayoutEvent) => void` | No | — | Invoked on Text layout |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | Controls how touch events are handled. Similar to `View`'s `pointerEvents`. |
| `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | — | Defines how far your touch may move off of the button, before deactivating the button. |
| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `selectable` | `boolean` | No | — | Lets the user select text, to use the native copy and paste functionality. |
| `selectionColor` | `ColorValue` | No | — | The highlight color of the text. |
| `style` | `StyleProp<TextStyle>` | No | — | @see https://reactnative.dev/docs/text#style |
| `suppressHighlighting` | `boolean` | No | — | When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `textBreakStrategy` | `"balanced" | "highQuality" | "simple"` | No | — | Set text break strategy on Android API Level 23+ default is `highQuality`. |

#### Select.Item

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `string` | Yes | — | The option's label — rendered as the row text and used as the value label. |
| `value` | `string` | Yes | — | The option's value. |
| `closeOnPress` | `boolean` | No | — | Close the dropdown when this option is pressed (default behaviour). |
| `disabled` | `boolean` | No | — | Disables selection and greys the label. |
| `indicator` | `ReactNode` | No | — | Overrides the default checkmark marker shown on the selected row. |
| `prefix` | `ReactNode` | No | — | Leading content, before the label — typically a `Select.ItemPrefix`. |
| `suffix` | `ReactNode` | No | — | Trailing content, after the label — typically a `Select.ItemSuffix`. |

#### Select.Label

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | No | — | The label content. Its placement (above the trigger vs. inside it) is set by the `labelPlacement` prop on `Select.Roo... |

#### Select.Root

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Explicit accessible name for the trigger. Auto-derived from a string `Select.Label`; supply this when the label conte... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
| `defaultValue` | `{ value: string; label: string; }` | No | — |  |
| `description` | `ReactNode` | No | — | Supporting text rendered below the trigger. A string renders as neutral `HelperText`; a `ReactNode` renders verbatim.... |
| `dir` | `"ltr" | "rtl"` | No | — | Platform: WEB ONLY |
| `disabled` | `boolean` | No | — |  |
| `error` | `ReactNode` | No | — | Error message rendered below the trigger as critical `HelperText` (string) or verbatim (`ReactNode`). Takes priority ... |
| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `invalid` | `boolean` | No | — | Applies the critical trigger styling without rendering an error message. |
| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
| `labelPlacement` | `"above" | "inside"` | No | `inside` | Where the field label renders: `"inside"` the trigger (small, above the value) or `"above"` it. DS-owned default (`"i... |
| `name` | `string` | No | — | Platform: WEB ONLY |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onOpenChange` | `(open: boolean) => void` | No | — |  |
| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onValueChange` | `(option: { value: string; label: string; }) => void` | No | — |  |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
| `readOnly` | `boolean` | No | — | Renders the trigger as non-interactive read-only presentation (subtle surface, no chevron, value as text). `disabled`... |
| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
| `required` | `boolean` | No | — | Platform: WEB ONLY |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
| `status` | `"critical" | "neutral"` | No | — | `critical` applies the critical trigger styling. Defaults to `neutral`. |
| `style` | `StyleProp<ViewStyle>` | No | — |  |
| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `value` | `{ value: string; label: string; }` | No | — |  |

#### Select.Separator

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
| `decorative` | `boolean` | No | — |  |
| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
| `style` | `StyleProp<ViewStyle>` | No | — |  |
| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |

#### Select.Trigger

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | No | — | Trigger content — typically `Select.Value` (and optionally a label part). |
| `ref` | `Ref<TriggerRef>` | No | — | Imperative handle exposing `open()` / `close()`. Stays `null` when the field is `readOnly` (no interactive trigger is... |
| `testID` | `string` | No | — | Used verbatim to locate the trigger in end-to-end tests. Defaults to `ATL-Select-Trigger`. |

#### Select.Value

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `placeholder` | `string` | Yes | — |  |
| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
| `adjustsFontSizeToFit` | `boolean` | No | — | Specifies whether font should be scaled down automatically to fit given style constraints. |
| `allowFontScaling` | `boolean` | No | — | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. |
| `android_hyphenationFrequency` | `"full" | "none" | "normal"` | No | — | Hyphenation strategy |
| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
| `aria-checked` | `"mixed" | boolean` | No | — |  |
| `aria-disabled` | `boolean` | No | — |  |
| `aria-expanded` | `boolean` | No | — |  |
| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
| `aria-modal` | `boolean` | No | — |  |
| `aria-selected` | `boolean` | No | — |  |
| `aria-valuemax` | `number` | No | — |  |
| `aria-valuemin` | `number` | No | — |  |
| `aria-valuenow` | `number` | No | — |  |
| `aria-valuetext` | `string` | No | — |  |
| `asChild` | `boolean` | No | — |  |
| `dataDetectorType` | `"all" | "email" | "link" | "none" | "phoneNumber"` | No | — | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
| `disabled` | `boolean` | No | — | Specifies the disabled state of the text view for testing purposes. |
| `dynamicTypeRamp` | `"body" | "callout" | "caption1" | "caption2" | "footnote" | "headline" | "largeTitle" | "subheadline" | "title1" | "title2" | "title3"` | No | — | The Dynamic Type scale ramp to apply to this element on iOS. |
| `ellipsizeMode` | `"clip" | "head" | "middle" | "tail"` | No | — | This can be one of the following values:  - `head` - The line is displayed so that the end fits in the container and ... |
| `id` | `string` | No | — | Used to reference react managed views from native code. |
| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
| `lineBreakMode` | `"clip" | "head" | "middle" | "tail"` | No | — | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
| `lineBreakStrategyIOS` | `"hangul-word" | "none" | "push-out" | "standard"` | No | — | Set line break strategy on iOS. |
| `maxFontSizeMultiplier` | `number` | No | — | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined... |
| `minimumFontScale` | `number` | No | — | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
| `numberOfLines` | `number` | No | — | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the to... |
| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
| `onLongPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on long press. e.g., `onLongPress={this.increaseSize}>` |
| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
| `onPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on press. Text intrinsically supports press handling with a default highlight state (which ca... |
| `onPressIn` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onPressOut` | `(event: GestureResponderEvent) => void` | No | — |  |
| `onTextLayout` | `(event: TextLayoutEvent) => void` | No | — | Invoked on Text layout |
| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | Controls how touch events are handled. Similar to `View`'s `pointerEvents`. |
| `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | — | Defines how far your touch may move off of the button, before deactivating the button. |
| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
| `selectable` | `boolean` | No | — | Lets the user select text, to use the native copy and paste functionality. |
| `selectionColor` | `ColorValue` | No | — | The highlight color of the text. |
| `style` | `StyleProp<TextStyle>` | No | — | @see https://reactnative.dev/docs/text#style |
| `suppressHighlighting` | `boolean` | No | — | When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press... |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
| `textBreakStrategy` | `"balanced" | "highQuality" | "simple"` | No | — | Set text break strategy on Android API Level 23+ default is `highQuality`. |