@financial-times/o3-form 0.11.0 → 0.12.0

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DehCIKP7.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/CheckBox.js

@@ -1,13 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
   let { inputId, checkboxDescription, attributes, optional, error } = props;
-  if (!inputId) {
-    inputId = uniqueId("_");
-  }
   const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
@@ -34,6 +29,7 @@ const CheckBox = (props) => {
   const newProps = {
     ...props,
     labelId: props.inputId,
+    labelsElement: props.inputId,
     descriptionId: props.inputId
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FormField.TitledFormField, { ...newProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 

package/cjs/DateInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-DupfYbgc.js';
+import { D as DateInputProps } from './index-DehCIKP7.js';
 
 declare const DateInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/DateInput.js

@@ -1,9 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
 var _react = require('react');
 var _DateInputMask = require('./DateInputMask');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-date-input");
 const DateInput = ({
   label,
   feedback,
@@ -14,7 +12,6 @@ const DateInput = ({
   optional
 }) => {
   let inputRef = _react.useRef.call(void 0, null);
-  const id = inputId || uniqueId("_");
   const inputClasses = [
     "o3-form",
     "o3-form-text-input"
@@ -33,13 +30,13 @@ const DateInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           ref: inputRef,
           disabled,
           className: inputClasses.join(" "),

package/cjs/DateInputPicker.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-DupfYbgc.js';
+import { D as DateInputProps } from './index-DehCIKP7.js';
 
 declare const DateInputPicker: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/DateInputPicker.js

@@ -1,7 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-date-input");
 const DateInputPicker = ({
   label,
   feedback,
@@ -11,7 +9,6 @@ const DateInputPicker = ({
   inputId,
   optional
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = [
     "o3-form",
     "o3-form-text-input"
@@ -25,13 +22,13 @@ const DateInputPicker = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/cjs/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-DupfYbgc.js';
+import { E as ErrorSummaryProps } from './index-DehCIKP7.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/FileInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FileInputProps } from './index-DupfYbgc.js';
+import { a as FileInputProps } from './index-DehCIKP7.js';
 
 declare const FileInput: ({ label, feedback, description, disabled, attributes, inputId, optional, isUploading }: FileInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/FileInput.js

@@ -1,8 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
 var _react = require('react');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-file-input");
 const FileInput = ({
   label,
   feedback,
@@ -13,7 +11,6 @@ const FileInput = ({
   optional,
   isUploading
 }) => {
-  const id = inputId || uniqueId("_");
   const [file, setFile] = _react.useState.call(void 0, null);
   const onUpload = (event) => {
     setFile(_nullishCoalesce(_optionalChain([event, 'access', _ => _.target, 'access', _2 => _2.files, 'optionalAccess', _3 => _3[0]]), () => ( null)));
@@ -31,11 +28,11 @@ const FileInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: inputClasses.join(" "), children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: id, className: "o3-form-file-input__label", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: inputId, className: "o3-form-file-input__label", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "span",
               {
@@ -56,7 +53,7 @@ const FileInput = ({
             "input",
             {
               ...attributes,
-              id,
+              id: inputId,
               className: "o3-form-file-input__input-field",
               disabled,
               required: !optional,

package/cjs/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-DupfYbgc.js';
+import { P as PasswordInputProps } from './index-DehCIKP7.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/PasswordInput.js

@@ -1,9 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
 var _PasswordInputToggle = require('./PasswordInputToggle');
 var _react = require('react');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-password-input");
 const PasswordInput = ({
   label,
   feedback,
@@ -14,7 +12,6 @@ const PasswordInput = ({
   optional,
   forgotPasswordLink
 }) => {
-  const id = inputId || uniqueId("_");
   let inputRef = _react.useRef.call(void 0, null);
   let buttonRef = _react.useRef.call(void 0, null);
   let toggleRef = _react.useRef.call(void 0, null);
@@ -44,14 +41,14 @@ const PasswordInput = ({
         label,
         feedback,
         description,
-        inputId: id,
+        labelsElement: inputId,
         optional,
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-password-input__container", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "input",
             {
               ...attributes,
-              id,
+              id: inputId,
               ref: inputRef,
               disabled,
               "data-testid": "o3-password-input",

package/cjs/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DehCIKP7.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/RadioButton.js

@@ -1,13 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-radio-button-input");
 const RadioButtonItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  if (!inputId) {
-    inputId = uniqueId("_");
-  }
   const classNames = ["o3-form-input-radio-button", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");

package/cjs/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-DupfYbgc.js';
+import { S as SelectInputProps } from './index-DehCIKP7.js';
 
 declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/SelectInput.js

@@ -1,7 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-select-input");
 const SelectInput = ({
   label,
   feedback,
@@ -13,7 +11,6 @@ const SelectInput = ({
   children,
   length
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-select-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-select-input--error");
@@ -24,7 +21,7 @@ const SelectInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
@@ -34,7 +31,7 @@ const SelectInput = ({
             "select",
             {
               ...attributes,
-              id,
+              id: inputId,
               disabled,
               className: inputClasses.join(" "),
               required: !optional,

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-DupfYbgc.js';
+import { T as TextInputProps } from './index-DehCIKP7.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/TextInput.js

@@ -1,7 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -12,7 +10,6 @@ const TextInput = ({
   inputId,
   optional
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -26,13 +23,13 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/cjs/fieldComponents/Feedback.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FeedbackProps } from '../index-DupfYbgc.js';
+import { b as FeedbackProps } from '../index-DehCIKP7.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/FormField.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DupfYbgc.js';
+import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DehCIKP7.js';
 
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, optional, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+declare const LabeledFormField: ({ label, labelsElement, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, labelsElement, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional, inputId }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
 
 export { FormFieldset, LabeledFormField, TitledFormField };

package/cjs/fieldComponents/FormField.js

@@ -1,23 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _outils = require('@financial-times/o-utils');
 var _Feedback = require('./Feedback');
-const uniqueId = _outils.uidBuilder.call(void 0, "o3-form");
 const LabeledFormField = ({
-  inputId,
   label,
+  labelsElement,
   description,
   feedback,
   children,
   optional
 }) => {
-  const id = inputId || uniqueId("input_");
-  const descriptionId = description ? uniqueId("description_") : void 0;
+  const descriptionId = description ? `description_${labelsElement}` : void 0;
+  const labelId = `label_${labelsElement}`;
   const labelClasses = ["o3-form-field__label"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-form-field", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: labelClasses.join(" "), htmlFor: id, children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: labelClasses.join(" "), id: labelId, htmlFor: labelsElement, children: label }),
     description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description }),
     children,
     feedback && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Feedback.Feedback, { ...feedback })
@@ -25,13 +23,14 @@ const LabeledFormField = ({
 };
 const TitledFormField = ({
   label,
+  labelsElement,
   description,
   feedback,
   children,
   optional
 }) => {
-  const descriptionId = description ? uniqueId("description_") : void 0;
-  const labelId = uniqueId("label_");
+  const descriptionId = description ? `description_${labelsElement}` : void 0;
+  const labelId = `label_${labelsElement}`;
   const labelClasses = ["o3-form-field__title"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");
@@ -48,9 +47,10 @@ const FormFieldset = ({
   description,
   feedback,
   children,
-  optional
+  optional,
+  inputId
 }) => {
-  const descriptionId = uniqueId("checkbox_");
+  const descriptionId = `checkbox_${inputId}`;
   const labelClasses = ["o3-form-field__legend"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");

package/cjs/{index-DupfYbgc.d.ts → index-DehCIKP7.d.ts}

@@ -1,6 +1,6 @@
 type BaseInputProps = {
-    inputId?: string;
-    label?: string;
+    inputId: string;
+    label: string;
     description?: string;
     optional?: boolean;
     error?: boolean;
@@ -25,8 +25,8 @@ interface SelectInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
     children?: React.JSX.Element[];
-    inputId?: string;
-    label?: string;
+    inputId: string;
+    label: string;
     length?: 1 | 3;
     description?: string;
     optional?: boolean;
@@ -49,13 +49,15 @@ interface RadioButtonProps extends BaseInputProps {
     radioButtonLabel: string;
 }
 interface FormFieldsetProps {
+    inputId: string;
     label: string;
     description?: string;
     children: React.JSX.Element | React.JSX.Element[];
     feedback?: FeedbackProps;
     optional?: boolean;
 }
-interface FormFieldProps extends BaseInputProps {
+interface FormFieldProps extends Omit<BaseInputProps, 'inputId'> {
+    labelsElement: string;
     feedback?: FeedbackProps;
     children: React.JSX.Element & JSX.IntrinsicElements['input'];
 }

package/cjs/index.d.ts

@@ -11,4 +11,4 @@ export { DateInputPicker } from './DateInputPicker.js';
 export { FileInput } from './FileInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-DupfYbgc.js';
+import './index-DehCIKP7.js';

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DehCIKP7.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/CheckBox.js

@@ -1,13 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { uidBuilder } from "@financial-times/o-utils";
 import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
-const uniqueId = uidBuilder("o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
   let { inputId, checkboxDescription, attributes, optional, error } = props;
-  if (!inputId) {
-    inputId = uniqueId("_");
-  }
   const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
@@ -34,6 +29,7 @@ const CheckBox = (props) => {
   const newProps = {
     ...props,
     labelId: props.inputId,
+    labelsElement: props.inputId,
     descriptionId: props.inputId
   };
   return /* @__PURE__ */ jsx(TitledFormField, { ...newProps, children: /* @__PURE__ */ jsx(

package/esm/DateInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-DupfYbgc.js';
+import { D as DateInputProps } from './index-DehCIKP7.js';
 
 declare const DateInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/DateInput.js

@@ -1,9 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
 import { useEffect, useRef } from "react";
 import { DateInputMask } from "./DateInputMask";
-const uniqueId = uidBuilder("o3-form-date-input");
 const DateInput = ({
   label,
   feedback,
@@ -14,7 +12,6 @@ const DateInput = ({
   optional
 }) => {
   let inputRef = useRef(null);
-  const id = inputId || uniqueId("_");
   const inputClasses = [
     "o3-form",
     "o3-form-text-input"
@@ -33,13 +30,13 @@ const DateInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           ref: inputRef,
           disabled,
           className: inputClasses.join(" "),

package/esm/DateInputPicker.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-DupfYbgc.js';
+import { D as DateInputProps } from './index-DehCIKP7.js';
 
 declare const DateInputPicker: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/DateInputPicker.js

@@ -1,7 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
-const uniqueId = uidBuilder("o3-form-date-input");
 const DateInputPicker = ({
   label,
   feedback,
@@ -11,7 +9,6 @@ const DateInputPicker = ({
   inputId,
   optional
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = [
     "o3-form",
     "o3-form-text-input"
@@ -25,13 +22,13 @@ const DateInputPicker = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/esm/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-DupfYbgc.js';
+import { E as ErrorSummaryProps } from './index-DehCIKP7.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/FileInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FileInputProps } from './index-DupfYbgc.js';
+import { a as FileInputProps } from './index-DehCIKP7.js';
 
 declare const FileInput: ({ label, feedback, description, disabled, attributes, inputId, optional, isUploading }: FileInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/FileInput.js

@@ -1,8 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
 import { useState } from "react";
-const uniqueId = uidBuilder("o3-form-file-input");
 const FileInput = ({
   label,
   feedback,
@@ -13,7 +11,6 @@ const FileInput = ({
   optional,
   isUploading
 }) => {
-  const id = inputId || uniqueId("_");
   const [file, setFile] = useState(null);
   const onUpload = (event) => {
     setFile(event.target.files?.[0] ?? null);
@@ -31,11 +28,11 @@ const FileInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: inputClasses.join(" "), children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "o3-form-file-input__label", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "o3-form-file-input__label", children: [
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -56,7 +53,7 @@ const FileInput = ({
             "input",
             {
               ...attributes,
-              id,
+              id: inputId,
               className: "o3-form-file-input__input-field",
               disabled,
               required: !optional,

package/esm/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-DupfYbgc.js';
+import { P as PasswordInputProps } from './index-DehCIKP7.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/PasswordInput.js

@@ -1,9 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
 import { PasswordInputToggle as PasswordInputToggleController } from "./PasswordInputToggle";
 import { useEffect, useRef } from "react";
-const uniqueId = uidBuilder("o3-form-password-input");
 const PasswordInput = ({
   label,
   feedback,
@@ -14,7 +12,6 @@ const PasswordInput = ({
   optional,
   forgotPasswordLink
 }) => {
-  const id = inputId || uniqueId("_");
   let inputRef = useRef(null);
   let buttonRef = useRef(null);
   let toggleRef = useRef(null);
@@ -44,14 +41,14 @@ const PasswordInput = ({
         label,
         feedback,
         description,
-        inputId: id,
+        labelsElement: inputId,
         optional,
         children: /* @__PURE__ */ jsxs("div", { className: "o3-password-input__container", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               ...attributes,
-              id,
+              id: inputId,
               ref: inputRef,
               disabled,
               "data-testid": "o3-password-input",

package/esm/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DehCIKP7.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/RadioButton.js

@@ -1,13 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { uidBuilder } from "@financial-times/o-utils";
 import { FormFieldset } from "./fieldComponents/FormField";
-const uniqueId = uidBuilder("o3-form-radio-button-input");
 const RadioButtonItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  if (!inputId) {
-    inputId = uniqueId("_");
-  }
   const classNames = ["o3-form-input-radio-button", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");

package/esm/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-DupfYbgc.js';
+import { S as SelectInputProps } from './index-DehCIKP7.js';
 
 declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/SelectInput.js

@@ -1,7 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
-const uniqueId = uidBuilder("o3-form-select-input");
 const SelectInput = ({
   label,
   feedback,
@@ -13,7 +11,6 @@ const SelectInput = ({
   children,
   length
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-select-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-select-input--error");
@@ -24,7 +21,7 @@ const SelectInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ jsx(
         "div",
@@ -34,7 +31,7 @@ const SelectInput = ({
             "select",
             {
               ...attributes,
-              id,
+              id: inputId,
               disabled,
               className: inputClasses.join(" "),
               required: !optional,

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-DupfYbgc.js';
+import { T as TextInputProps } from './index-DehCIKP7.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/TextInput.js

@@ -1,7 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
-const uniqueId = uidBuilder("o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -12,7 +10,6 @@ const TextInput = ({
   inputId,
   optional
 }) => {
-  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -26,13 +23,13 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId: id,
+      labelsElement: inputId,
       optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
           ...attributes,
-          id,
+          id: inputId,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/esm/fieldComponents/Feedback.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FeedbackProps } from '../index-DupfYbgc.mjs';
+import { b as FeedbackProps } from '../index-DehCIKP7.mjs';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/FormField.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DupfYbgc.mjs';
+import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DehCIKP7.mjs';
 
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, optional, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+declare const LabeledFormField: ({ label, labelsElement, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, labelsElement, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional, inputId }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
 
 export { FormFieldset, LabeledFormField, TitledFormField };

package/esm/fieldComponents/FormField.js

@@ -1,23 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { uidBuilder } from "@financial-times/o-utils";
 import { Feedback } from "./Feedback";
-const uniqueId = uidBuilder("o3-form");
 const LabeledFormField = ({
-  inputId,
   label,
+  labelsElement,
   description,
   feedback,
   children,
   optional
 }) => {
-  const id = inputId || uniqueId("input_");
-  const descriptionId = description ? uniqueId("description_") : void 0;
+  const descriptionId = description ? `description_${labelsElement}` : void 0;
+  const labelId = `label_${labelsElement}`;
   const labelClasses = ["o3-form-field__label"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");
   }
   return /* @__PURE__ */ jsxs("div", { className: "o3-form-field", children: [
-    /* @__PURE__ */ jsx("label", { className: labelClasses.join(" "), htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx("label", { className: labelClasses.join(" "), id: labelId, htmlFor: labelsElement, children: label }),
     description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
     children,
     feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
@@ -25,13 +23,14 @@ const LabeledFormField = ({
 };
 const TitledFormField = ({
   label,
+  labelsElement,
   description,
   feedback,
   children,
   optional
 }) => {
-  const descriptionId = description ? uniqueId("description_") : void 0;
-  const labelId = uniqueId("label_");
+  const descriptionId = description ? `description_${labelsElement}` : void 0;
+  const labelId = `label_${labelsElement}`;
   const labelClasses = ["o3-form-field__title"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");
@@ -48,9 +47,10 @@ const FormFieldset = ({
   description,
   feedback,
   children,
-  optional
+  optional,
+  inputId
 }) => {
-  const descriptionId = uniqueId("checkbox_");
+  const descriptionId = `checkbox_${inputId}`;
   const labelClasses = ["o3-form-field__legend"];
   if (optional) {
     labelClasses.push("o3-form-field--optional");

package/esm/{index-DupfYbgc.d.ts → index-DehCIKP7.d.ts}

@@ -1,6 +1,6 @@
 type BaseInputProps = {
-    inputId?: string;
-    label?: string;
+    inputId: string;
+    label: string;
     description?: string;
     optional?: boolean;
     error?: boolean;
@@ -25,8 +25,8 @@ interface SelectInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
     children?: React.JSX.Element[];
-    inputId?: string;
-    label?: string;
+    inputId: string;
+    label: string;
     length?: 1 | 3;
     description?: string;
     optional?: boolean;
@@ -49,13 +49,15 @@ interface RadioButtonProps extends BaseInputProps {
     radioButtonLabel: string;
 }
 interface FormFieldsetProps {
+    inputId: string;
     label: string;
     description?: string;
     children: React.JSX.Element | React.JSX.Element[];
     feedback?: FeedbackProps;
     optional?: boolean;
 }
-interface FormFieldProps extends BaseInputProps {
+interface FormFieldProps extends Omit<BaseInputProps, 'inputId'> {
+    labelsElement: string;
     feedback?: FeedbackProps;
     children: React.JSX.Element & JSX.IntrinsicElements['input'];
 }

package/esm/index.d.ts

@@ -11,4 +11,4 @@ export { DateInputPicker } from './DateInputPicker.js';
 export { FileInput } from './FileInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-DupfYbgc.js';
+import './index-DehCIKP7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",
@@ -35,7 +35,6 @@
 		"check:type": "tsc --noEmit"
 	},
 	"peerDependencies": {
-		"@financial-times/o-utils": "^2.2.1",
 		"@financial-times/o3-foundation": "^3.0.0"
 	},
 	"devDependencies": {