React Aria

A component accepts the props of the React Aria component that it wraps. The API reference on a component page lists the props that vip/ui adds. It links to the React Aria props for the rest.

The vip/ui Form wraps the React Aria Form. It renders a native <form> element.

• To submit, use action or onSubmit.
• To read values, use FormData or controlled value and onChange props.
• To validate, use native constraints, such as isRequired, or a validate function.
• To show server errors, pass validationErrors to the form. Use the field names as keys.

Each field shows its error message below the input.

React Aria forms guide (opens in a new tab)

React Aria uses the browser locale by default. To set a different locale, wrap your app in I18nProvider. vip/ui does not add the provider.

• Date, time, number, and calendar components use the locale to format values.
• Components get the reading direction from the locale.
• I18nProvider does not change validation messages. They use the browser language.

React Aria I18nProvider guide (opens in a new tab)

React Aria components send props to their parts through React context. A NumberField gives its increment and decrement buttons their onPress handlers. Slots identify repeated parts, such as slot="increment" and slot="decrement". Props that you set on a part override the context props.

To replace a part with your own, use the parent context. Do not write the behavior again.

• useContextProps merges your props with the context props. It supports the slot prop.
• useSlottedContext reads the context value without a merge.
• State contexts give the parent state. vip/ui uses DisclosureStateContext to animate disclosure panels.

React Aria contexts guide (opens in a new tab)