Skip to content

Commit 0525d64

Browse files
authored
Fix RSP form example (#6733)
* Fix RSP form example
1 parent d3062f8 commit 0525d64

File tree

1 file changed

+4
-4
lines changed
  • packages/dev/docs/pages/react-spectrum

1 file changed

+4
-4
lines changed

packages/dev/docs/pages/react-spectrum/forms.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ In addition to the built-in constraints, custom validation is supported by provi
186186

187187
Usually, validation errors should be displayed to the user after the value is committed (e.g. on blur), or when the form is submitted. This avoids confusing the user with irrelevant errors while they are still entering a value.
188188

189-
In some cases, validating in realtime can be desireable, such as when meeting password requirements. This can be accomplished by making the field value [controlled](#controlled-forms), and setting the `isInvalid` and `errorMessage` props accordingly.
189+
In some cases, validating in realtime can be desireable, such as when meeting password requirements. This can be accomplished by making the field value [controlled](#controlled-forms), and setting the `validationState` and `errorMessage` props accordingly.
190190

191191
```tsx example
192192
function Example() {
@@ -204,7 +204,7 @@ function Example() {
204204
<TextField
205205
label="Password"
206206
/*- begin highlight -*/
207-
isInvalid={!!error}
207+
validationState={!!error ? 'invalid' : undefined}
208208
errorMessage={error}
209209
/*- end highlight -*/
210210
value={password}
@@ -213,7 +213,7 @@ function Example() {
213213
}
214214
```
215215

216-
By default, the `isInvalid` prop does not block forms from being submitted. To block form submission, use the `validationBehavior="native"` prop on the [Form](Form.html) component.
216+
By default, the `validationState="invalid"` prop does not block forms from being submitted. To block form submission, use the `validationBehavior="native"` prop on the [Form](Form.html) component.
217217

218218
### Server validation
219219

@@ -437,7 +437,7 @@ function App() {
437437
onBlur={onBlur}
438438
ref={ref}
439439
isRequired
440-
isInvalid={invalid}
440+
validationState={invalid ? 'invalid' : undefined}
441441
errorMessage={error?.message}
442442
/>
443443
)}

0 commit comments

Comments
 (0)