@dloizides/ui-forms 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Changelog
 
-## 1.11.0
+## 1.12.0
+
+**`FormField` gained `labelHidden` — hide the visible label, keep the accessible name.**
+
+A field whose placeholder already names it (a toolbar search box, an inline filter) does
+not want a stacked visible label: the label wastes a row and, worse, pushes the input a
+label-row lower than a bare button beside it, so the two misalign. Until now the only way
+to drop the visible label was to blank `label` — which ALSO blanked the input's
+`accessibilityLabel`, silently stripping the accessible name.
+
+`labelHidden` removes ONLY the visible `<label>` row: `label` stays required and the input
+keeps `accessibilityLabel={label}`, so a screen reader reads the same name and the field
+still resolves by role + name. Additive and backward-compatible — default `false`, every
+existing call renders unchanged.
+
+## 1.11.1
 
 **`ThemedTextInput` shipped no metrics, so every direct caller got a raw 19px input.**
 

package/dist/index.d.mts

@@ -380,11 +380,22 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
+    /**
+     * Hide the VISIBLE label row while keeping the accessible name.
+     *
+     * For a field whose placeholder already names it (a toolbar search box, an inline
+     * filter) the stacked visible label both wastes a row and misaligns the input
+     * against a bare button beside it. Setting this drops ONLY the visible `<label>`:
+     * the input still carries `accessibilityLabel={label}`, so a screen reader reads
+     * the same name and `label` stays REQUIRED — you never lose the accessible name by
+     * blanking it, which is the trap this option exists to remove. Default `false`.
+     */
+    labelHidden?: boolean;
     required?: boolean;
     error?: string;
     containerStyle?: ViewStyle;
 }
-declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
+declare const FormField: ({ label, labelHidden, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
 /**
  * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`

package/dist/index.d.ts

@@ -380,11 +380,22 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
+    /**
+     * Hide the VISIBLE label row while keeping the accessible name.
+     *
+     * For a field whose placeholder already names it (a toolbar search box, an inline
+     * filter) the stacked visible label both wastes a row and misaligns the input
+     * against a bare button beside it. Setting this drops ONLY the visible `<label>`:
+     * the input still carries `accessibilityLabel={label}`, so a screen reader reads
+     * the same name and `label` stays REQUIRED — you never lose the accessible name by
+     * blanking it, which is the trap this option exists to remove. Default `false`.
+     */
+    labelHidden?: boolean;
     required?: boolean;
     error?: string;
     containerStyle?: ViewStyle;
 }
-declare const FormField: ({ label, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
+declare const FormField: ({ label, labelHidden, required, error, containerStyle, ...textInputProps }: FormFieldProps) => React.ReactElement;
 
 /**
  * `ThemedTextInput` — the shared, readable + lively text-input primitive. A thin `<TextInput>`

package/dist/index.js

@@ -612,23 +612,33 @@ var ThemedTextInput = React2__default.default.forwardRef(function ThemedTextInpu
 });
 var FormField = ({
   label,
+  labelHidden = false,
   required = false,
   error,
   containerStyle,
   ...textInputProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(Field, { containerStyle, error, label, required, children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsxRuntime.jsx(
-  ThemedTextInput,
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Field,
   {
-    accessibilityHint: `Enter ${label}`,
-    accessibilityLabel: label,
-    describedById,
-    hasError,
-    id: controlId,
-    requiredField: required,
-    testID: "form-field-input",
-    ...textInputProps
+    containerStyle,
+    error,
+    label: labelHidden ? void 0 : label,
+    required,
+    children: ({ describedById, hasError, controlId }) => /* @__PURE__ */ jsxRuntime.jsx(
+      ThemedTextInput,
+      {
+        accessibilityHint: `Enter ${label}`,
+        accessibilityLabel: label,
+        describedById,
+        hasError,
+        id: controlId,
+        requiredField: required,
+        testID: "form-field-input",
+        ...textInputProps
+      }
+    )
   }
-) });
+);
 var TRANSPARENT_COLOR = "transparent";
 var WHITE_COLOR = "#fff";
 var SOLID_RADIUS = 20;