@grantcodes/ui 2.11.1 → 2.11.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.11.2](https://github.com/grantcodes/ui/compare/ui-v2.11.1...ui-v2.11.2) (2026-05-03)
+
+
+### Bug Fixes
+
+* **ui:** add horizontal property to form field ([1a0bbfa](https://github.com/grantcodes/ui/commit/1a0bbfa1ed69e341c5e43ee0678bcb9d0f0469a7))
+
 ## [2.11.1](https://github.com/grantcodes/ui/compare/ui-v2.11.0...ui-v2.11.1) (2026-05-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",

package/src/components/form-field/form-field.component.js

@@ -1,5 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
+import { classMap } from "lit/directives/class-map.js";
 import formFieldStyles from "./form-field.css" with { type: "css" };
 import { generateId } from "../../lib/generate-id.js";
 
@@ -8,7 +9,8 @@ export class GrantCodesFormField extends LitElement {
 	static styles = [formFieldStyles];
 
 	static properties = {
-		label: { type: String, reflect: true },
+    label: { type: String, reflect: true },
+		direction: { type: String },
 		error: { type: String },
 		help: { type: String },
 	};
@@ -20,7 +22,13 @@ export class GrantCodesFormField extends LitElement {
 		this.error = undefined;
 		this.help = undefined;
 
-		this.groupInput = false;
+    this.groupInput = false;
+
+    /**
+		 * Direction of the field. Generally want horizontal for checkboxes and radios.
+		 * @type {'vertical' | 'horizontal'}
+		 */
+		this.direction = "vertical";
 
 		/** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
 		this.inputElements;
@@ -123,19 +131,23 @@ export class GrantCodesFormField extends LitElement {
     `;
 	}
 
-	render() {
+  render() {
+    const wrapperClass = classMap({
+      'form-field': true,
+      'form-field--horizontal': this.direction === 'horizontal'
+    })
 		if (this.groupInput) {
 			return html`
-      <fieldset class="form-field">
+      <fieldset class=${wrapperClass}>
         <legend class="form-field__label">${this.label}</legend>
         <slot></slot>
         ${this.errorTemplate()}
       </fieldset>
     `;
-		}
+    }
 
 		return html`
-      <div class="form-field">
+      <div class=${wrapperClass}>
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span

package/src/components/form-field/form-field.css

@@ -20,10 +20,11 @@
 	gap: inherit;
 }
 
-:host(:has(> input[type="checkbox"], > input[type="radio"])) .form-field label {
+.form-field--horizontal label {
 	flex-direction: row-reverse;
 	align-items: center;
 	justify-content: flex-end;
+	gap: var(--g-theme-spacing-sm);
 }
 
 .form-field__label {

package/src/components/form-field/form-field.stories.js

@@ -42,7 +42,7 @@ export const FormFieldWithHelp = {
 };
 
 export const FormFieldWithSelect = {
-	args: {
+  args: {
 		slot: html`
       <select>
         <option value="1">Option 1</option>
@@ -60,13 +60,15 @@ export const FormFieldWithTextArea = {
 };
 
 export const FormFieldWithCheckbox = {
-	args: {
+  args: {
+    direction: 'horizontal',
 		slot: html`<input type="checkbox" value="1" name="name" />`,
 	},
 };
 
 export const FormFieldWithRadio = {
-	args: {
+  args: {
+    direction: 'horizontal',
 		slot: html`<input type="radio" />`,
 	},
 };
@@ -74,13 +76,13 @@ export const FormFieldWithRadio = {
 export const FormFieldWithRadioGroup = {
 	args: {
 		slot: html`
-      <grantcodes-form-field label="Radio number 1">
+      <grantcodes-form-field label="Radio number 1" direction="horizontal">
         <input type="radio" name="radio-group" value="1" />
       </grantcodes-form-field>
-      <grantcodes-form-field label="Radio number 2">
+      <grantcodes-form-field label="Radio number 2" direction="horizontal">
         <input type="radio" name="radio-group" value="2" />
       </grantcodes-form-field>
-      <grantcodes-form-field label="Radio number 3">
+      <grantcodes-form-field label="Radio number 3" direction="horizontal">
         <input type="radio" name="radio-group" value="3" />
       </grantcodes-form-field>
     `,
@@ -90,13 +92,13 @@ export const FormFieldWithRadioGroup = {
 export const FormFieldWithCheckboxGroup = {
 	args: {
 		slot: html`
-      <grantcodes-form-field label="Checkbox number 1"
+      <grantcodes-form-field label="Checkbox number 1" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
-      <grantcodes-form-field label="Checkbox number 2"
+      <grantcodes-form-field label="Checkbox number 2" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
-      <grantcodes-form-field label="Checkbox number 3"
+      <grantcodes-form-field label="Checkbox number 3" direction="horizontal"
         ><input type="checkbox"
       /></grantcodes-form-field>
     `,