diff --git a/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs
index 75926795db83..cc653255c23c 100644
--- a/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/kv/form/index.hbs
@@ -37,41 +37,96 @@
             <Hds::Layout::Flex @direction='column' as |LF|>
 
               <LF.Item style='align-self: flex-end;'>
-                <Hds::Form::Toggle::Field
-                  name='json'
-                  checked={{if this.json 'checked'}}
-                  {{on 'change' api.change}}
-                  as |F|
-                >
-                  <F.Label>Code</F.Label>
-                </Hds::Form::Toggle::Field>
+                <Hds::Layout::Flex @gap='16' @align='center' as |F|>
+                  {{#if this.json}}
+                    <F.Item>
+                      <Hds::Form::Select::Field
+                        name='language'
+                        @width='150px'
+                        {{on 'change' api.change}}
+                        as |S|
+                      >
+                        <S.Label>Format</S.Label>
+                        <S.Options>
+                          {{#each this.languages as |lang|}}
+                            <option value={{lang.value}} selected={{eq this.language lang.value}}>
+                              {{lang.label}}
+                            </option>
+                          {{/each}}
+                        </S.Options>
+                      </Hds::Form::Select::Field>
+                    </F.Item>
+                  {{/if}}
+                  <F.Item>
+                    <Hds::Form::Toggle::Field
+                      name='json'
+                      checked={{if this.json 'checked'}}
+                      {{on 'change' api.change}}
+                      as |F|
+                    >
+                      <F.Label>Code</F.Label>
+                    </Hds::Form::Toggle::Field>
+                  </F.Item>
+                </Hds::Layout::Flex>
               </LF.Item>
               <label for='' class='type-text{{if api.data.error.Value " has-error"}}'>
                 {{#if this.json}}
                   {{#if (or disabld api.disabled)}}
-                    <Hds::CodeBlock
-                      @language='bash'
-                      @value={{atob api.data.Value}}
-                      @isStandalone={{false}}
-                      @ariaLabel='value'
-                      as |CB|
-                    >
-                      <CB.Title @tag='h2'>Value</CB.Title>
-                    </Hds::CodeBlock>
+                    {{#if (eq this.language 'toml')}}
+                      <Hds::CodeEditor
+                        @name='Value'
+                        @readonly={{true}}
+                        @value={{atob api.data.Value}}
+                        @onInput={{action api.change 'value'}}
+                        @customExtensions={{(toml-extension)}}
+                        @ariaLabel='value'
+                        @hasCopyButton={{true}}
+                        @isStandalone={{false}}
+                        as |CE|
+                      >
+                        <CE.Title @tag='h2'>Value</CE.Title>
+                      </Hds::CodeEditor>
+                    {{else}}
+                      <Hds::CodeBlock
+                        @language={{this.codeBlockLanguage}}
+                        @value={{atob api.data.Value}}
+                        @isStandalone={{false}}
+                        @ariaLabel='value'
+                        as |CB|
+                      >
+                        <CB.Title @tag='h2'>Value</CB.Title>
+                      </Hds::CodeBlock>
+                    {{/if}}
                   {{else}}
-                    <Hds::CodeEditor
-                      @name='Value'
-                      @readonly={{or disabld api.disabled}}
-                      @value={{atob api.data.Value}}
-                      @onInput={{action api.change 'value'}}
-                      @language='yaml'
-                      @ariaLabel='value'
-                      @hasCopyButton={{true}}
-                      @isStandalone={{false}}
-                      as |CE|
-                    >
-                      <CE.Title @tag='h2'>Value</CE.Title>
-                    </Hds::CodeEditor>
+                    {{#if (eq this.language 'toml')}}
+                      <Hds::CodeEditor
+                        @name='Value'
+                        @readonly={{or disabld api.disabled}}
+                        @value={{atob api.data.Value}}
+                        @onInput={{action api.change 'value'}}
+                        @customExtensions={{(toml-extension)}}
+                        @ariaLabel='value'
+                        @hasCopyButton={{true}}
+                        @isStandalone={{false}}
+                        as |CE|
+                      >
+                        <CE.Title @tag='h2'>Value</CE.Title>
+                      </Hds::CodeEditor>
+                    {{else}}
+                      <Hds::CodeEditor
+                        @name='Value'
+                        @readonly={{or disabld api.disabled}}
+                        @value={{atob api.data.Value}}
+                        @onInput={{action api.change 'value'}}
+                        @language={{this.language}}
+                        @ariaLabel='value'
+                        @hasCopyButton={{true}}
+                        @isStandalone={{false}}
+                        as |CE|
+                      >
+                        <CE.Title @tag='h2'>Value</CE.Title>
+                      </Hds::CodeEditor>
+                    {{/if}}
                   {{/if}}
                 {{else}}
                   <span>Value</span>
@@ -142,4 +197,4 @@
       </form>
     {{/let}}
   </BlockSlot>
-</DataForm>
\ No newline at end of file
+</DataForm>
diff --git a/ui/packages/consul-ui/app/components/consul/kv/form/index.js b/ui/packages/consul-ui/app/components/consul/kv/form/index.js
index c9348001f857..78bd69789325 100644
--- a/ui/packages/consul-ui/app/components/consul/kv/form/index.js
+++ b/ui/packages/consul-ui/app/components/consul/kv/form/index.js
@@ -4,13 +4,35 @@
  */
 
 import Component from '@ember/component';
-import { set } from '@ember/object';
+import { set, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+/**
+ * Available syntax highlighting languages for the KV editor.
+ * Each entry contains:
+ * - value: The language identifier used by the HDS components
+ * - label: The display label shown in the dropdown
+ * - codeBlockLanguage: The fallback language for CodeBlock (which has different supported languages)
+ */
+const LANGUAGES = [
+  { value: 'json', label: 'JSON', codeBlockLanguage: 'json' },
+  { value: 'hcl', label: 'HCL', codeBlockLanguage: 'hcl' },
+  { value: 'yaml', label: 'YAML', codeBlockLanguage: 'yaml' },
+  { value: 'xml', label: 'XML', codeBlockLanguage: 'xml' },
+  { value: 'toml', label: 'TOML', codeBlockLanguage: 'hcl' }, // TOML uses HCL as CodeBlock fallback (similar syntax)
+];
+
 export default Component.extend({
   tagName: '',
   encoder: service('btoa'),
   json: true,
+  language: 'yaml', // Default syntax highlighting language
+
+  /**
+   * Available languages for the syntax highlighting dropdown.
+   */
+  languages: LANGUAGES,
+
   ondelete: function () {
     this.onsubmit(...arguments);
   },
@@ -18,6 +40,16 @@ export default Component.extend({
     this.onsubmit(...arguments);
   },
   onsubmit: function () {},
+
+  /**
+   * Gets the appropriate CodeBlock language.
+   * For TOML, falls back to HCL since CodeBlock doesn't natively support TOML.
+   */
+  codeBlockLanguage: computed('language', function () {
+    const lang = LANGUAGES.find((l) => l.value === this.language);
+    return lang ? lang.codeBlockLanguage : 'json';
+  }),
+
   actions: {
     change: function (e, form) {
       const item = form.getData();
@@ -42,6 +74,9 @@ export default Component.extend({
             // a set(this, 'json', valueFromSomeStorageJustForThisKV) would be added here
             set(this, 'json', !this.json);
             break;
+          case 'language':
+            set(this, 'language', target.value);
+            break;
           default:
             throw err;
         }
diff --git a/ui/packages/consul-ui/app/helpers/toml-extension.js b/ui/packages/consul-ui/app/helpers/toml-extension.js
new file mode 100644
index 000000000000..0fd5a9cada11
--- /dev/null
+++ b/ui/packages/consul-ui/app/helpers/toml-extension.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { helper } from '@ember/component/helper';
+import { StreamLanguage } from '@codemirror/language';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+
+/**
+ * Helper to provide TOML syntax highlighting extension for CodeMirror 6.
+ * Used with the HDS CodeEditor component via @customExtensions.
+ *
+ * @returns {Array} Array containing the TOML StreamLanguage extension
+ */
+export function tomlExtension() {
+  return [StreamLanguage.define(toml)];
+}
+
+export default helper(tomlExtension);
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index dbe4bc323130..1e22cb5b3713 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -56,6 +56,8 @@
     "@babel/eslint-parser": "^7.28.5",
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/legacy-modes": "^6.5.1",
     "@docfy/ember": "^0.8.5",
     "@ember-data/adapter": "~4.12.8",
     "@ember-data/model": "~4.12.8",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index bb9ec599ff03..9220a811025a 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -62,6 +62,12 @@ importers:
       '@babel/plugin-transform-class-properties':
         specifier: ^7.27.1
         version: 7.27.1(@babel/core@7.28.5)
+      '@codemirror/language':
+        specifier: ^6.11.2
+        version: 6.11.2
+      '@codemirror/legacy-modes':
+        specifier: ^6.5.1
+        version: 6.5.1
       '@docfy/ember':
         specifier: ^0.8.5
         version: 0.8.5(@babel/core@7.28.5)(@glint/template@1.5.2)