@financial-times/o3-form 0.6.0 → 0.7.1

package/README.md

@@ -8,8 +8,10 @@ Provides components to construct forms.
     - [Form Field, Form Fieldset and Feedback](#form-field-form-fieldset-and-feedback)
   - [Text Input](#text-input)
     - [Short text input](#short-text-input)
+    - [Password Input](#password-input)
   - [Checkbox](#checkbox)
     - [Checkbox Group](#checkbox-group)
+  - [Select Input](#select-input)
 - [Contact](#contact)
 - [Licence](#licence)
 
@@ -263,6 +265,73 @@ import {TextInput} from '@financial-times/o3-form/cjs'; // or esm
 />
 ```
 
+#### Password Input
+
+A password input for collecting password values. Features a show/hide password toggle and a forgot password link.
+
+**HTML**
+```html
+<div class="o3-form-field">
+  <label
+          class="o3-form-field__label"
+          for="o3-form-password-input-_5538262633951523"
+  >
+    Password
+  </label>
+  <span
+          class="o3-form-input__description"
+          id="o3-form-description_5812824517374977"
+  >
+        Your password must be at least 8 characters.
+      </span>
+  <div class="o3-password-input__container">
+    <input
+            id="o3-form-password-input-_5538262633951523"
+            class="o3-form o3-form-text-input o3-form-text-input--password"
+            required=""
+            type="password"
+            aria-required="true"
+    />
+    <button
+            id="o3-form-password-toggle"
+            class="o3-password-input__show-password-toggle o3-password-input__show-password-toggle--show"
+            aria-label="Show password"
+            title="Show password"
+            aria-pressed="false"
+    ></button>
+  </div>
+  <div class="o3-form-feedback o3-form-feedback__undefined">
+    <span class="o3-form-feedback__undefined-message"></span>
+  </div>
+</div>
+<div class="o3-password-input__controls">
+  <a class="o3-typography-link" href="#">Forgot password?</a>
+</div>
+```
+
+Be sure to include Javascript to enable the password toggle feature.
+
+```javascript
+import PasswordInput from '@financial-times/o3-form/cjs/PasswordInput';
+
+document.addEventListener('DOMContentLoaded', function () {
+ const passwordInput = new PasswordInput(
+  document.getElementById('o3-form-password-toggle')
+ );
+});
+```
+
+```tsx
+import {PasswordInput} from '@financial-times/o3-form';
+
+<Form>
+  <PasswordInput
+   label="Password"
+   description="Your password must be at least 8 characters."
+   forgotPasswordLink="#" />
+</Form>
+```
+
 ### Checkbox
 
 A customizable and accessible checkbox input for selecting one or more items from a list, or turning an item on or off. Checkbox can also have a state of `indeterminate` and `o3-form` provides styling, for `indeterminate` state but this state can only be set using javaScript. Read more about [indeterminate state](https://css-tricks.com/indeterminate-checkboxes/).
@@ -384,6 +453,61 @@ import {CheckBoxGroup, CheckBoxItem} from '@financial-times/o3-form/cjs'; // or
 | `description` | A description of the group of checkboxes | string     |         |
 | `children`    | The checkboxes to be rendered            | CheckBox[] |         |
 
+### Select Input
+
+A dropdown select input for choosing one option from a list.
+
+```html
+<div class="o3-form-field">
+  <label
+          class="o3-form-field__label"
+          for="o3-form-select-input-_3564083419195512"
+  >
+    Card type
+  </label>
+  <span
+          class="o3-form-input__description"
+          id="o3-form-description_14471165011746046"
+  >
+        Printed on the front side of your payment card.
+      </span>
+  <div class="o3-form-select-input__container">
+    <select
+            id="o3-form-select-input-_3564083419195512"
+            class="o3-form o3-form-select-input"
+            required=""
+            aria-required="true"
+            maxlength="0"
+            type="select"
+    >
+      <option value="American Express">American Express</option>
+      <option value="Visa Debit">Visa Debit</option>
+      <option value="Visa Credit">Visa Credit</option>
+      <option value="Mastercard Debit">Mastercard Debit</option>
+      <option value="Mastercard Credit">Mastercard Credit</option>
+    </select>
+  </div>
+  <div class="o3-form-feedback o3-form-feedback__undefined">
+    <span class="o3-form-feedback__undefined-message"></span>
+  </div>
+</div>
+```
+
+```tsx
+import {SelectInput} from '@financial-times/o3-form';
+
+<SelectInput
+ label="Card type"
+ description="Printed on the front side of your payment card."
+>
+  <option value="American Express">American Express</option>
+  <option value="Visa Debit">Visa Debit</option>
+  <option value="Visa Credit">Visa Credit</option>
+  <option value="Mastercard Debit">Mastercard Debit</option>
+  <option value="Mastercard Credit">Mastercard Credit</option>
+</SelectInput>
+```
+
 ## Contact
 
 If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o3-editorial-typography/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

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-CufC9u5W.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

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-CufC9u5W.js';
+import { E as ErrorSummaryProps } from './index-B5zd_nrf.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/PasswordInput.d.ts

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

package/cjs/PasswordInput.js

@@ -1,7 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+"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 _CheckBox = require('./CheckBox');
+var _PasswordInputjs = require('../js/PasswordInput.js');
+var _react = require('react');
 const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-password-input");
 const PasswordInput = ({
   label,
@@ -10,14 +11,34 @@ const PasswordInput = ({
   disabled,
   attributes,
   inputId,
-  optional
+  optional,
+  forgotPasswordLink
 }) => {
   const id = inputId || uniqueId("_");
-  const showPasswordId = `${id}-showPassword`;
-  const inputClasses = ["o3-form", "o3-form-text-input"];
+  let inputRef = _react.useRef.call(void 0, null);
+  let buttonRef = _react.useRef.call(void 0, null);
+  let toggleRef = _react.useRef.call(void 0, 
+    null
+  );
+  const inputClasses = [
+    "o3-form",
+    "o3-form-text-input",
+    "o3-form-text-input--password"
+  ];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
   }
+  _react.useEffect.call(void 0, () => {
+    const inputEl = inputRef.current;
+    const btnEl = buttonRef.current;
+    if (!inputEl || !btnEl) return;
+    toggleRef.current = new (0, _PasswordInputjs.PasswordInput)(inputEl, {
+      toggleButtonId: btnEl.id
+    });
+    return () => {
+      toggleRef.current = null;
+    };
+  }, []);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _FormField.LabeledFormField,
@@ -27,31 +48,40 @@ const PasswordInput = ({
         description,
         inputId: id,
         optional,
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "input",
-          {
-            ...attributes,
-            id,
-            disabled,
-            className: inputClasses.join(" "),
-            required: !optional,
-            "aria-required": !optional,
-            type: "password"
-          }
-        )
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-password-input__container", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ...attributes,
+              id,
+              ref: inputRef,
+              disabled,
+              "data-testid": "o3-password-input",
+              className: inputClasses.join(" "),
+              required: !optional,
+              type: "password",
+              "aria-required": !optional
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              id: "o3-form-password-toggle",
+              className: "o3-password-input__show-password-toggle o3-password-input__show-password-toggle--show",
+              ref: buttonRef,
+              "data-testid": "o3-password-input-toggle",
+              "aria-controls": inputId,
+              "aria-label": "Show password",
+              title: "Show password",
+              onClick: () => {
+                _optionalChain([toggleRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.toggle, 'call', _3 => _3()]);
+              }
+            }
+          )
+        ] })
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "o3-password-input__controls", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _CheckBox.CheckBoxItem,
-        {
-          attributes: { disabled },
-          inputId: showPasswordId,
-          checkboxLabel: "Show password"
-        }
-      ),
-      !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
-    ] })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "o3-password-input__controls", children: !disabled && forgotPasswordLink && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", href: forgotPasswordLink, children: "Forgot password?" }) })
   ] });
 };
 

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-CufC9u5W.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/SelectInput.d.ts

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

package/cjs/SelectInput.js

@@ -0,0 +1,45 @@
+"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,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional,
+  children
+}) => {
+  const id = inputId || uniqueId("_");
+  const inputClasses = ["o3-form", "o3-form-select-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-select-input--error");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _FormField.LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      inputId: id,
+      optional,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "o3-form-select-input__container", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "select",
+        {
+          ...attributes,
+          id,
+          disabled,
+          className: inputClasses.join(" "),
+          required: !optional,
+          "aria-required": !optional,
+          children
+        }
+      ) })
+    }
+  );
+};
+
+
+exports.SelectInput = SelectInput;

package/cjs/TextInput.d.ts

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

package/cjs/fieldComponents/Feedback.d.ts

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

package/cjs/fieldComponents/FormField.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CufC9u5W.js';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B5zd_nrf.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;

package/cjs/{index-CufC9u5W.d.ts → index-B5zd_nrf.d.ts}

@@ -11,9 +11,21 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface SelectInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+    children?: React.JSX.Element[];
+    inputId?: string;
+    label?: string;
+    description?: string;
+    optional?: boolean;
+    error?: boolean;
+    attributes?: JSX.IntrinsicElements['select'];
+}
 interface PasswordInputProps extends BaseInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
+    forgotPasswordLink?: string;
 }
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
@@ -50,4 +62,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };

package/cjs/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CufC9u5W.js';
+import './index-B5zd_nrf.js';

package/css/main.css

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   justify-content: start;
-  gap: var(--o3-spacing-s);
 }
 
 /* src/css/components/form-field.css */
@@ -12,7 +11,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--o3-font-family-metric);
-  gap: var(--o3-spacing-3xs);
+  gap: var(--o3-spacing-xs);
 }
 .o3-form-field:where(fieldset) {
   margin: 0;
@@ -164,6 +163,7 @@ input[class*=o3-form-text-input][type=text]:disabled {
 }
 .o3-form-input-checkbox__input:disabled + label::before {
   border-color: var(--_o3-form-color-use-case-border-disabled);
+  background-color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-checkbox__input:disabled + label {
   color: var(--_o3-form-color-use-case-border-disabled);
@@ -294,6 +294,7 @@ input[class*=o3-form-text-input][type=text]:disabled {
 }
 .o3-form-input-radio-button:disabled + label::before {
   border-color: var(--_o3-form-color-use-case-border-disabled);
+  background-color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-radio-button:disabled:checked + label::after {
   background-color: var(--_o3-form-color-use-case-border-disabled);
@@ -390,16 +391,97 @@ input[class*=o3-form-text-input][type=text]:disabled {
 }
 
 /* src/css/components/password-input.css */
+.o3-password-input__container {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  --o3-grid-columns-to-span-count: 4;
+  max-width: var(--o3-grid-columns-to-span-width, 100%);
+  margin-top: var(--o3-spacing-3xs);
+}
+.o3-password-input__container input {
+  width: 100%;
+  padding-right: 48px;
+}
+.o3-password-input__show-password-toggle {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-repeat: no-repeat;
+  border: none;
+}
+.o3-password-input__show-password-toggle--show {
+  background: var(--o3-icon-eye-open);
+}
+.o3-password-input__show-password-toggle--hide {
+  background: var(--o3-icon-eye-closed);
+}
 .o3-password-input__controls {
   display: flex;
+  flex-direction: row-reverse;
   justify-content: space-between;
   --o3-grid-columns-to-span-count: 4;
   max-width: var(--o3-grid-columns-to-span-width, 100%);
-  margin-top: var(--o3-spacing-3xs);
   font-family: var(--o3-type-body-base-font-family);
   font-size: var(--o3-type-body-base-font-size);
   font-weight: var(--o3-type-body-base-font-weight);
   line-height: var(--o3-type-body-base-line-height);
 }
+.o3-password-input__controls > a {
+  color: var(--o3-color-use-case-body-text);
+  text-decoration-color: unset;
+}
+.o3-form-text-input--password {
+  padding-right: var(--o3-spacing-s);
+}
+
+/* src/css/components/select-input.css */
+.o3-form-select-input {
+  border: var(--_o3-form-input-border);
+  padding: var(--o3-spacing-4xs) var(--o3-spacing-l) var(--o3-spacing-4xs) var(--o3-spacing-2xs);
+  background: var(--_o3-form-color-use-case-background);
+  box-sizing: border-box;
+  border-radius: var(--_o3-form-input-border-radius);
+  font-family: var(--o3-type-body-lg-font-family);
+  font-size: var(--o3-type-body-lg-font-size);
+  font-weight: var(--o3-type-body-lg-font-weight);
+  line-height: var(--o3-type-body-lg-line-height);
+  width: 100%;
+  min-height: 44px;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.o3-form-select-input__container {
+  position: relative;
+  display: inline-block;
+  --o3-grid-columns-to-span-count: 4;
+  max-width: var(--o3-grid-columns-to-span-width, 100%);
+}
+.o3-form-select-input__container:after {
+  content: "";
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  mask: var(--o3-icon-chevron-down) no-repeat center;
+  -webkit-mask: var(--o3-icon-chevron-down) no-repeat center;
+  background-color: var(--o3-color-palette-black-60);
+  pointer-events: none;
+}
+.o3-form-select-input--error {
+  border: var(--_o3-form-input-border-error);
+  background-color: var(--_o3-form-color-use-case-background-error);
+}
+select[class*=o3-form-select-input]:disabled,
+select[class*=o3-form-select-input]:disabled {
+  color: var(--o3-color-use-case-muted-text);
+  background-color: var(--_o3-form-color-use-case-background-disabled);
+  border-color: var(--_o3-form-color-use-case-border-disabled);
+}
 
 /* main.css */

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-CufC9u5W.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

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-CufC9u5W.js';
+import { E as ErrorSummaryProps } from './index-B5zd_nrf.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/PasswordInput.d.ts

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

package/esm/PasswordInput.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
-import { CheckBoxItem } from "./CheckBox";
+import { PasswordInput as PasswordInputController } from "../js/PasswordInput.js";
+import { useEffect, useRef } from "react";
 const uniqueId = uidBuilder("o3-form-password-input");
 const PasswordInput = ({
   label,
@@ -10,14 +11,34 @@ const PasswordInput = ({
   disabled,
   attributes,
   inputId,
-  optional
+  optional,
+  forgotPasswordLink
 }) => {
   const id = inputId || uniqueId("_");
-  const showPasswordId = `${id}-showPassword`;
-  const inputClasses = ["o3-form", "o3-form-text-input"];
+  let inputRef = useRef(null);
+  let buttonRef = useRef(null);
+  let toggleRef = useRef(
+    null
+  );
+  const inputClasses = [
+    "o3-form",
+    "o3-form-text-input",
+    "o3-form-text-input--password"
+  ];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
   }
+  useEffect(() => {
+    const inputEl = inputRef.current;
+    const btnEl = buttonRef.current;
+    if (!inputEl || !btnEl) return;
+    toggleRef.current = new PasswordInputController(inputEl, {
+      toggleButtonId: btnEl.id
+    });
+    return () => {
+      toggleRef.current = null;
+    };
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       LabeledFormField,
@@ -27,31 +48,40 @@ const PasswordInput = ({
         description,
         inputId: id,
         optional,
-        children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...attributes,
-            id,
-            disabled,
-            className: inputClasses.join(" "),
-            required: !optional,
-            "aria-required": !optional,
-            type: "password"
-          }
-        )
+        children: /* @__PURE__ */ jsxs("div", { className: "o3-password-input__container", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...attributes,
+              id,
+              ref: inputRef,
+              disabled,
+              "data-testid": "o3-password-input",
+              className: inputClasses.join(" "),
+              required: !optional,
+              type: "password",
+              "aria-required": !optional
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              id: "o3-form-password-toggle",
+              className: "o3-password-input__show-password-toggle o3-password-input__show-password-toggle--show",
+              ref: buttonRef,
+              "data-testid": "o3-password-input-toggle",
+              "aria-controls": inputId,
+              "aria-label": "Show password",
+              title: "Show password",
+              onClick: () => {
+                toggleRef.current?.toggle();
+              }
+            }
+          )
+        ] })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "o3-password-input__controls", children: [
-      /* @__PURE__ */ jsx(
-        CheckBoxItem,
-        {
-          attributes: { disabled },
-          inputId: showPasswordId,
-          checkboxLabel: "Show password"
-        }
-      ),
-      !disabled && /* @__PURE__ */ jsx("a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "o3-password-input__controls", children: !disabled && forgotPasswordLink && /* @__PURE__ */ jsx("a", { className: "o3-typography-link", href: forgotPasswordLink, children: "Forgot password?" }) })
   ] });
 };
 export {

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-CufC9u5W.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/SelectInput.d.ts

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

package/esm/SelectInput.js

@@ -0,0 +1,45 @@
+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,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional,
+  children
+}) => {
+  const id = inputId || uniqueId("_");
+  const inputClasses = ["o3-form", "o3-form-select-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-select-input--error");
+  }
+  return /* @__PURE__ */ jsx(
+    LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      inputId: id,
+      optional,
+      children: /* @__PURE__ */ jsx("div", { className: "o3-form-select-input__container", children: /* @__PURE__ */ jsx(
+        "select",
+        {
+          ...attributes,
+          id,
+          disabled,
+          className: inputClasses.join(" "),
+          required: !optional,
+          "aria-required": !optional,
+          children
+        }
+      ) })
+    }
+  );
+};
+export {
+  SelectInput
+};

package/esm/TextInput.d.ts

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

package/esm/fieldComponents/Feedback.d.mts

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

package/esm/fieldComponents/FormField.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CufC9u5W.mjs';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B5zd_nrf.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;

package/esm/{index-CufC9u5W.d.ts → index-B5zd_nrf.d.ts}

@@ -11,9 +11,21 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface SelectInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+    children?: React.JSX.Element[];
+    inputId?: string;
+    label?: string;
+    description?: string;
+    optional?: boolean;
+    error?: boolean;
+    attributes?: JSX.IntrinsicElements['select'];
+}
 interface PasswordInputProps extends BaseInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
+    forgotPasswordLink?: string;
 }
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
@@ -50,4 +62,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };

package/esm/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CufC9u5W.js';
+import './index-B5zd_nrf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.6.0",
+	"version": "0.7.1",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",
@@ -35,9 +35,11 @@
 	},
 	"peerDependencies": {
 		"@financial-times/o-utils": "^2.2.1",
-		"@financial-times/o3-figma-sb-links": "^0.0.0",
 		"@financial-times/o3-foundation": "^3.0.0"
 	},
+	"devDependencies": {
+		"@financial-times/o3-figma-sb-links": "^0.0.0"
+	},
 	"engines": {
 		"npm": ">7"
 	},