From f9741d44048eca78bdd51c073d5b2f50e25bf19b Mon Sep 17 00:00:00 2001 From: Xiaoyan Li Date: Mon, 13 Oct 2025 15:06:01 +0800 Subject: [PATCH 1/2] feat(RAC): SearchField: add readonly/required render props --- .../react-aria-components/src/SearchField.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx index 7bfdc703008..dd1831601d2 100644 --- a/packages/react-aria-components/src/SearchField.tsx +++ b/packages/react-aria-components/src/SearchField.tsx @@ -54,6 +54,16 @@ export interface SearchFieldRenderProps { * @selector [data-invalid] */ isInvalid: boolean, + /** + * Whether the text field is read only. + * @selector [data-readonly] + */ + isReadOnly: boolean, + /** + * Whether the text field is required. + * @selector [data-required] + */ + isRequired: boolean, /** * State of the search field. */ @@ -99,6 +109,8 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search isEmpty: state.value === '', isDisabled: props.isDisabled || false, isInvalid: validation.isInvalid || false, + isReadOnly: props.isReadOnly || false, + isRequired: props.isRequired || false, state }, defaultClassName: 'react-aria-SearchField' @@ -115,7 +127,9 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search slot={props.slot || undefined} data-empty={state.value === '' || undefined} data-disabled={props.isDisabled || undefined} - data-invalid={validation.isInvalid || undefined}> + data-invalid={validation.isInvalid || undefined} + data-readonly={props.isReadOnly || undefined} + data-required={props.isRequired || undefined}> Date: Mon, 20 Oct 2025 09:57:39 -0500 Subject: [PATCH 2/2] Update packages/react-aria-components/src/SearchField.tsx --- packages/react-aria-components/src/SearchField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx index dd1831601d2..4a86b4f4ace 100644 --- a/packages/react-aria-components/src/SearchField.tsx +++ b/packages/react-aria-components/src/SearchField.tsx @@ -55,12 +55,12 @@ export interface SearchFieldRenderProps { */ isInvalid: boolean, /** - * Whether the text field is read only. + * Whether the search field is read only. * @selector [data-readonly] */ isReadOnly: boolean, /** - * Whether the text field is required. + * Whether the search field is required. * @selector [data-required] */ isRequired: boolean,