diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index 4497eab72de8..5bbd2363c4b3 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -25,12 +25,16 @@ const propTypes = {
/** Function to call when the user types in the search input */
setSearchValue: PropTypes.func.isRequired,
+
+ /** Label to display on field */
+ label: PropTypes.string,
};
const defaultProps = {
currentState: '',
onClose: () => {},
onStateSelected: () => {},
+ label: undefined,
};
function filterOptions(searchValue, data) {
@@ -42,7 +46,7 @@ function filterOptions(searchValue, data) {
return _.filter(data, (country) => country.text.toLowerCase().includes(searchValue.toLowerCase()));
}
-function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue}) {
+function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) {
const {translate} = useLocalize();
const countryStates = useMemo(
@@ -69,13 +73,13 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
useNativeDriver
>
{},
+ label: undefined,
};
-function StatePicker({value, errorText, onInputChange, forwardedRef}) {
+function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
const {translate} = useLocalize();
const allStates = translate('allStates');
const [isPickerVisible, setIsPickerVisible] = useState(false);
@@ -61,7 +65,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef}) {
ref={forwardedRef}
shouldShowRightIcon
title={title}
- description={translate('common.state')}
+ description={label || translate('common.state')}
descriptionTextStyle={descStyle}
onPress={showPickerModal}
/>
@@ -75,6 +79,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef}) {
onStateSelected={updateStateInput}
searchValue={searchValue}
setSearchValue={setSearchValue}
+ label={label}
/>
);