[6.x] Add suffix support to text form controls

CHANGELOG.md

@@ -154,6 +154,7 @@
 - Removed `CraftCms\Cms\Plugin\Concerns\HasFilesystemTypes`. Plugins can no longer register custom Craft filesystem types. ([#19650](https://github.com/craftcms/cms/pull/19650))
 
 ### Plugins & Extensibility
+- Added `CraftCms\Cms\Form\Controls\Text::suffix()` for display-only suffix text in PHP and Vue form controls. ([#19770](https://github.com/craftcms/cms/pull/19770))
 - Added `CraftCms\Cms\Element\Data\ElementSiteSettings`, the shared base for element URI and route settings. ([#19762](https://github.com/craftcms/cms/pull/19762))
 - Added support for fluent plugin settings classes. ([#19574](https://github.com/craftcms/cms/pull/19574))
 - Added support for refreshable standard plugin settings forms and conditional configuration of core form nodes. ([#19545](https://github.com/craftcms/cms/pull/19545))

resources/js/modules/forms/TextControl.vue

@@ -80,7 +80,11 @@
     @model-value-changed="onModelValueChanged"
   >
     <input :id="inputId" slot="input" />
-    <slot name="suffix" />
+    <slot name="suffix">
+      <span v-if="control.props.suffix" slot="suffix">{{
+        control.props.suffix
+      }}</span>
+    </slot>
   </craft-input>
   <craft-text-expander
     v-if="editable && control.props.textExpanderTriggers"

resources/js/modules/forms/types.ts

@@ -50,6 +50,7 @@ export type TextControlProps = {
   size?: number;
   dir?: string;
   monospace?: boolean;
+  suffix?: string;
   textExpanderTriggers?: TextExpanderTriggers;
 };
 

src/Form/Controls/Text.php

@@ -42,6 +42,8 @@ class Text extends Control
 
     private bool $monospace = false;
 
+    private ?string $suffix = null;
+
     public static function renderHtml(ControlPayload $control, mixed $value, array $attributes, FormHtmlRenderer $renderer): string
     {
         $input = Input::make()
@@ -62,6 +64,7 @@ public static function renderHtml(ControlPayload $control, mixed $value, array $
             ->inputSize($control->props['size'] ?? null)
             ->orientation($control->props['dir'] ?? null)
             ->monospace((bool) ($control->props['monospace'] ?? false))
+            ->suffix($control->props['suffix'] ?? null)
             ->disabled($attributes['disabled'] || ($attributes['readonly'] && ($control->props['inputType'] ?? 'text') === 'range'))
             ->readOnly($attributes['readonly'])
             ->describedBy($attributes['aria']['describedby'] ?? null)
@@ -178,6 +181,13 @@ public function monospace(bool $monospace = true): static
         return $this;
     }
 
+    public function suffix(?string $suffix): static
+    {
+        $this->suffix = $suffix;
+
+        return $this;
+    }
+
     #[\Override]
     public function props(mixed $value = null): array
     {
@@ -196,6 +206,7 @@ public function props(mixed $value = null): array
             'size' => $this->size,
             'dir' => $this->dir,
             'monospace' => $this->monospace ?: null,
+            'suffix' => $this->suffix,
             ...$this->textExpanderProps(),
         ]);
     }