@k8slens/lds-form

Form components for the Lens Design System – structured form fields with built-in validation.

Installation

npm install @k8slens/lds-form @k8slens/lds @k8slens/lds-tokens

Setup

import "@k8slens/lds-tokens/lib/electron/font-face.css";
import "@k8slens/lds/lib/es/index.css";
import "@k8slens/lds/lib/es/typography.css";
import "@k8slens/lds-form/lib/es/index.css";

Usage

FormInput (with built-in validation)

FormInput is a complete form field that includes label, input, and error message handling:

import { FormInput } from "@k8slens/lds-form";

export const MyForm = () => {
  const [email, setEmail] = useState("");

  return (
    <FormInput
      name="email"
      type="email"
      label="Email Address"
      value={email}
      onChange={setEmail}
      required
    />
  );
};

Building Custom Fields

For custom layouts, compose with individual components:

import { FormField, FormLabel, FormInput, FormErrorMessage } from "@k8slens/lds-form";

export const CustomField = () => (
  <FormField>
    <FormLabel>Username</FormLabel>
    <FormInput name="username" type="text" />
    <FormErrorMessage>Username is required</FormErrorMessage>
  </FormField>
);

FormSwitchGroup

import { FormSwitchGroup } from "@k8slens/lds-form";

<FormSwitchGroup
  options={[
    { id: "email", label: "Email notifications" },
    { id: "sms", label: "SMS notifications" },
  ]}
  value={selected}
  onChange={setSelected}
/>;

Documentation

Browse components at lens-design-system.k8slens.dev.

AI Assistance

This package includes an llms.txt file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., AGENTS.md or CLAUDE.md):

Read node_modules/@k8slens/lds-form/llms.txt for form components reference.

Always use LDS form components and tokens. Search llms.txt before creating custom form fields.