OTP tokens

Author: mdo

scss/forms/_otp-input.scss

@@ -1,22 +1,27 @@
 @use "../config" as *;
 @use "../variables" as *;
 @use "form-variables" as *;
-
-// scss-docs-start otp-input-variables
-$otp-input-size:              3rem !default;
-$otp-input-size-sm:           2.25rem !default;
-$otp-input-size-lg:           3.5rem !default;
-$otp-input-font-size:         $font-size-lg !default;
-$otp-input-font-size-sm:      $font-size-base !default;
-$otp-input-font-size-lg:      $font-size-lg * 1.25 !default;
-$otp-input-gap:               .5rem !default;
-// scss-docs-end otp-input-variables
-
-@layer forms {
+@use "../mixins/border-radius" as *;
+
+// stylelint-disable custom-property-no-missing-var-function
+// scss-docs-start otp-tokens
+$otp-tokens: (
+  --otp-size: var(--btn-input-lg-min-height),
+  --otp-font-size: var(--btn-input-font-size),
+  --otp-gap: .5rem,
+) !default;
+// scss-docs-end otp-tokens
+// stylelint-enable custom-property-no-missing-var-function
+
+// scss-docs-start otp-sizes
+$otp-sizes: sm, lg !default;
+// scss-docs-end otp-sizes
+
+@layer components {
   .otp {
-    --otp-size: #{$otp-input-size};
-    --otp-font-size: #{$otp-input-font-size};
-    --otp-gap: #{$otp-input-gap};
+    @each $prop, $value in $otp-tokens {
+      #{$prop}: #{$value};
+    }
 
     display: inline-flex;
     gap: var(--otp-gap);
@@ -29,6 +34,7 @@ $otp-input-gap:               .5rem !default;
       font-weight: 500;
       line-height: 1;
       text-align: center;
+      @include border-radius(var(--otp-border-radius, var(--btn-input-border-radius)));
 
       // Remove default number spinners
       &::-webkit-outer-spin-button,
@@ -87,13 +93,11 @@ $otp-input-gap:               .5rem !default;
     user-select: none;
   }
 
-  .otp-sm {
-    --otp-size: #{$otp-input-size-sm};
-    --otp-font-size: #{$otp-input-font-size-sm};
-  }
-
-  .otp-lg {
-    --otp-size: #{$otp-input-size-lg};
-    --otp-font-size: #{$otp-input-font-size-lg};
+  @each $size in $otp-sizes {
+    .otp-#{$size} {
+      --otp-size: var(--btn-input-#{$size}-min-height);
+      --otp-font-size: var(--btn-input-#{$size}-font-size);
+      --otp-border-radius: var(--btn-input-#{$size}-border-radius);
+    }
   }
 }

site/src/content/docs/forms/otp-input.mdx

@@ -31,7 +31,7 @@ Wrap your inputs in a container with `.otp` and add `data-bs-otp` to enable the
 
 ## Connected inputs
 
-Add `.input-group` to visually connect the inputs into a single cohesive field, leveraging Bootstrap's [input group](/docs/forms/input-group/) styles.
+Add `.input-group` to visually connect the inputs into a single cohesive field, leveraging Bootstrap's [input group](/docs/forms/input-group/) styles. We override the `width` to prevent stretching the inputs.
 
 <Example code={`<div class="otp input-group" data-bs-otp>
     <input type="text" class="form-control" aria-label="Digit 1">
@@ -152,9 +152,9 @@ Add `.is-valid` or `.is-invalid` to the container to show validation states.
 
 Use a form label and help text for better accessibility.
 
-<Example code={`<div class="mb-3">
+<Example code={`<div class="vstack gap-2">
     <label class="form-label" id="otpLabel">Verification code</label>
-    <div class="otp input-group" data-bs-otp aria-labelledby="otpLabel" aria-describedby="otpHelp">
+    <div class="otp" data-bs-otp aria-labelledby="otpLabel" aria-describedby="otpHelp">
       <input type="text" class="form-control" aria-label="Digit 1">
       <input type="text" class="form-control" aria-label="Digit 2">
       <input type="text" class="form-control" aria-label="Digit 3">
@@ -193,19 +193,23 @@ const otpInput = new bootstrap.OtpInput(otpElement)
 
 Options can be passed via data attributes or JavaScript:
 
+<BsTable>
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `mask` | boolean | `false` | If `true`, inputs will use `type="password"` to hide the entered values. |
+</BsTable>
 
 ### Methods
 
+<BsTable>
 | Method | Description |
 | --- | --- |
 | `getValue()` | Returns the complete OTP value as a string. |
 | `setValue(value)` | Sets the OTP value, distributing characters across inputs. |
 | `clear()` | Clears all inputs and focuses the first one. |
 | `focus()` | Focuses the first empty input, or the last input if all are filled. |
 | `dispose()` | Destroys the component instance. |
+</BsTable>
 
 ```js
 const otpElement = document.querySelector('.otp')
@@ -223,10 +227,12 @@ otpInput.clear()
 
 ### Events
 
+<BsTable>
 | Event | Description |
 | --- | --- |
 | `complete.bs.otp` | Fired when all inputs are filled. The event's `value` property contains the complete code. |
 | `input.bs.otp` | Fired on each input change. Includes `value` (current combined value) and `index` (changed input index). |
+</BsTable>
 
 ```js
 const otpElement = document.querySelector('.otp')
@@ -251,6 +257,14 @@ otpElement.addEventListener('input.bs.otp', event => {
 
 ## CSS
 
-### Sass variables
+### Variables
 
-<ScssDocs name="otp-input-variables" file="scss/forms/_otp-input.scss" />
+<CSSVariables component="OTP input" className="otp" />
+
+<ScssDocs name="otp-tokens" file="scss/forms/_otp-input.scss" />
+
+### Sass list
+
+We use a Sass list to define the sizes of the OTP input, so you can easily add or modify sizes by fetching the associated root variables for each size. This list should generally match the sizes defined in the `$form-control-sizes` Sass map in `_form-control.scss`.
+
+<ScssDocs name="otp-sizes" file="scss/forms/_otp-input.scss" />