Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmSelectImports } from '@spartan-ng/helm/select';
import { HlmTextarea } from '@spartan-ng/helm/textarea';

@Component({
	selector: 'spartan-field-preview',
	imports: [
		HlmCheckbox,
		HlmTextarea,
		HlmButton,
		HlmInputImports,
		HlmFieldImports,
		BrnSelectImports,
		HlmSelectImports,
		ReactiveFormsModule,
	],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<form>
			<div hlmFieldGroup>
				<fieldset hlmFieldSet>
					<legend hlmFieldLegend>Payment Method</legend>
					<p hlmFieldDescription>All transactions are secure and encrypted</p>

					<div hlmFieldGroup>
						<div hlmField>
							<label hlmFieldLabel for="field-preview-name-on-card">Name on card</label>
							<input hlmInput placeholder="John Doe" id="field-preview-name-on-card" />
						</div>
						<div hlmField class="col-span-2">
							<label hlmFieldLabel for="field-preview-card-number">Card number</label>
							<input hlmInput placeholder="1234 1234 1234 1234" id="field-preview-card-number" />
							<p hlmFieldDescription>Enter your 16-digit card number without spaces or dashes.</p>
						</div>
						<div class="grid grid-cols-3 gap-4">
							<div hlmField>
								<label hlmFieldLabel for="field-exp-month--trigger">Month</label>
								<brn-select id="field-exp-month" class="inline-block" placeholder="MM">
									<hlm-select-trigger class="w-full">
										<hlm-select-value />
									</hlm-select-trigger>
									<hlm-select-content>
										<hlm-option value="01">01</hlm-option>
										<hlm-option value="02">02</hlm-option>
										<hlm-option value="03">03</hlm-option>
										<hlm-option value="04">04</hlm-option>
										<hlm-option value="05">05</hlm-option>
										<hlm-option value="06">06</hlm-option>
										<hlm-option value="07">07</hlm-option>
										<hlm-option value="08">08</hlm-option>
										<hlm-option value="09">09</hlm-option>
										<hlm-option value="10">10</hlm-option>
										<hlm-option value="11">11</hlm-option>
										<hlm-option value="12">12</hlm-option>
									</hlm-select-content>
								</brn-select>
							</div>
							<div hlmField>
								<label hlmFieldLabel for="field-exp-year--trigger">Year</label>
								<brn-select id="field-exp-year" class="inline-block" placeholder="YYYY">
									<hlm-select-trigger class="w-full">
										<hlm-select-value />
									</hlm-select-trigger>
									<hlm-select-content>
										<hlm-option value="2024">2024</hlm-option>
										<hlm-option value="2025">2025</hlm-option>
										<hlm-option value="2026">2026</hlm-option>
										<hlm-option value="2027">2027</hlm-option>
										<hlm-option value="2028">2028</hlm-option>
										<hlm-option value="2029">2029</hlm-option>
									</hlm-select-content>
								</brn-select>
							</div>
							<div hlmField>
								<label hlmFieldLabel for="field-preview-cvv">CVV</label>
								<input hlmInput placeholder="123" id="field-preview-cvv" />
							</div>
						</div>
					</div>
				</fieldset>
				<hlm-field-separator />
				<fieldset hlmFieldSet>
					<legend hlmFieldLegend>Billing Address</legend>
					<p hlmFieldDescription>The billing address associated with your payment method</p>
					<div hlmFieldGroup>
						<div hlmField orientation="horizontal">
							<hlm-checkbox id="field-preview-billing-address" [checked]="true" />
							<label hlmFieldLabel for="field-preview-billing-address">Same as shipping address.</label>
						</div>
					</div>
				</fieldset>
				<fieldset hlmFieldSet>
					<div hlmFieldGroup>
						<div hlmField>
							<label hlmFieldLabel for="field-preview-comments">Comments</label>
							<textarea hlmTextarea class="resize-none" id="field-preview-comments"></textarea>
						</div>
					</div>
				</fieldset>
				<div hlmField orientation="horizontal">
					<button hlmBtn>Submit</button>
					<button hlmBtn variant="outline">Cancel</button>
				</div>
			</div>
		</form>
	`,
})
export class FieldPreview {
	public control = new FormControl('', Validators.required);
}
export const anatomyCode = `
<div hlmField>
    <label hlmFieldLabel for="field-preview-fullname">Label</label>
    <!-- Input, Select, Switch, etc. -->
    <p hlmFieldDescription>Optional helper text.</p>
    <hlm-field-error>Validation message.</hlm-field-error>
</div>
`;
export const validationAndErrorCode = `
<div hlmField data-invalid="true">
	<label hlmFieldLabel for="validation-error-email">Email</label>
	<input hlmInput id="validation-error-email" type="email" aria-invalid="true" />
	<hlm-field-error>Enter a valid email address.</hlm-field-error>
</div>
`;

Installation

npx nx g @spartan-ng/cli:ui field

Usage

import { HlmFieldImports } from "@spartan-ng/helm/field";

<fieldset hlmFieldSet>
    <legend hlmFieldLegend>Profile</legend>
    <p hlmFieldDescription>This appears on invoices and emails.</p>
    <div hlmFieldGroup>
        <div hlmField>
            <label hlmFieldLabel for="field-preview-fullname">Full name</label>
            <input hlmInput id="field-preview-fullname" type="text" placeholder="John Doe" />
            <p hlmFieldDescription>This appears on invoices and emails.</p>
        </div>
        <div hlmField>
            <label hlmFieldLabel for="field-preview-username">Username</label>
            <input hlmInput id="field-preview-username" type="text" placeholder="john_doe_99" />
            <hlm-field-error>Choose another username.</hlm-field-error>
        </div>
        <div hlmField orientation="horizontal">
            <hlm-switch id="field-preview-subscribe-newsletter" />
            <label hlmFieldLabel for="field-preview-subscribe-newsletter">Subscribe to the newsletter</label>
        </div>
    </div>
</fieldset>

Anatomy

The Field family is designed for composing accessible forms. A typical field is structured as follows:

<div hlmField>
    <label hlmFieldLabel for="field-preview-fullname">Label</label>
    <!-- Input, Select, Switch, etc. -->
    <p hlmFieldDescription>Optional helper text.</p>
    <hlm-field-error>Validation message.</hlm-field-error>
</div>

HlmField is the core wrapper for a single field.
HlmFieldContent is a flex column that groups label and description. Not required if you have no description.
Wrap related fields with HlmFieldGroup , and use HlmFieldSet with HlmFieldLegend for semantic grouping.

Examples

Input

import { Component } from '@angular/core';
import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
import { HlmInput } from '@spartan-ng/helm/input';

@Component({
	selector: 'spartan-field-input-preview',
	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmInput],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<fieldset hlmFieldSet>
			<div hlmFieldGroup>
				<div hlmField>
					<label hlmFieldLabel for="field-input-preview-firstname">Username</label>
					<input hlmInput id="field-input-preview-firstname" type="text" placeholder="Alex Cooper" />
					<p hlmFieldDescription>Choose a unique username for your account.</p>
				</div>
				<div hlmField>
					<label hlmFieldLabel for="field-input-preview-password">Password</label>
					<p hlmFieldDescription>Must be at least 8 characters long.</p>
					<input hlmInput id="field-input-preview-password" type="password" placeholder="••••••••" />
				</div>
			</div>
		</fieldset>
	`,
})
export class FieldInputPreview {}

Textarea

import { Component } from '@angular/core';
import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
import { HlmTextarea } from '@spartan-ng/helm/textarea';

@Component({
	selector: 'spartan-field-textarea-preview',
	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmTextarea],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<fieldset hlmFieldSet>
			<div hlmFieldGroup>
				<div hlmField>
					<label hlmFieldLabel for="field-input-preview-firstname">Feedback</label>
					<textarea
						hlmTextarea
						id="field-input-preview-firstname"
						placeholder="Your feedback helps us improve..."
					></textarea>
					<p hlmFieldDescription>Share your thoughts about our service.</p>
				</div>
			</div>
		</fieldset>
	`,
})
export class FieldTextareaPreview {}

Select

import { Component } from '@angular/core';
import { BrnSelectImports } from '@spartan-ng/brain/select';
import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
import { HlmSelectImports } from '@spartan-ng/helm/select';

@Component({
	selector: 'spartan-field-select-preview',
	imports: [
		HlmFieldSet,
		HlmFieldGroup,
		HlmField,
		HlmFieldLabel,
		HlmFieldDescription,
		BrnSelectImports,
		HlmSelectImports,
	],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<fieldset hlmFieldSet>
			<div hlmFieldGroup>
				<div hlmField>
					<label hlmFieldLabel for="field-select-department">Department</label>
					<brn-select class="inline-block" placeholder="Choose a department">
						<hlm-select-trigger class="w-full" id="field-select-department">
							<hlm-select-value />
						</hlm-select-trigger>
						<hlm-select-content>
							<hlm-option value="engineering">Engineering</hlm-option>
							<hlm-option value="design">Design</hlm-option>
							<hlm-option value="marketing">Marketing</hlm-option>
							<hlm-option value="sales">Sales</hlm-option>
							<hlm-option value="support">Customer Support</hlm-option>
							<hlm-option value="hr">Human Resources</hlm-option>
							<hlm-option value="finance">Finance</hlm-option>
							<hlm-option value="operations">Operations</hlm-option>
						</hlm-select-content>
					</brn-select>
					<p hlmFieldDescription>Select your department or area of work.</p>
				</div>
			</div>
		</fieldset>
	`,
})
export class FieldSelectPreview {}

Slider

import { Component, signal } from '@angular/core';
import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
import { HlmSliderImports } from '@spartan-ng/helm/slider';

@Component({
	selector: 'spartan-field-slider-preview',
	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmSliderImports],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<fieldset hlmFieldSet>
			<div hlmFieldGroup>
				<div hlmField>
					<label hlmFieldLabel for="field-input-preview-firstname">Username</label>
					<p hlmFieldDescription>Set your budget range ($0 - {{ value() }}).</p>
					<hlm-slider [max]="1000" [step]="10" [(value)]="value" />
				</div>
			</div>
		</fieldset>
	`,
})
export class FieldSliderPreview {
	public readonly value = signal(500);
}

Fieldset

Address Information

Choose a unique username for your account.

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and IPods

Connected servers

Sync Desktop & Documents folders

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

import { Component } from '@angular/core';
import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
import { HlmFieldImports } from '@spartan-ng/helm/field';

@Component({
	selector: 'spartan-field-checkbox-preview',
	imports: [HlmFieldImports, HlmCheckbox],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<div hlmFieldGroup>
			<fieldset hlmFieldSet>
				<legend hlmFieldLegend variant="label">Show these items on the desktop</legend>
				<p hlmFieldDescription>Select the items you want to show on the desktop.</p>
				<div hlmFieldGroup class="gap-3">
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-hard-disks" />
						<label hlmFieldLabel for="field-hard-disks" class="font-normal">Hard disks</label>
					</div>
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-external-disks" />
						<label hlmFieldLabel for="field-external-disks" class="font-normal">External disks</label>
					</div>
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-cds-dvds-ipods" />
						<label hlmFieldLabel for="field-cds-dvds-ipods" class="font-normal">CDs, DVDs, and IPods</label>
					</div>
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-connected-servers" />
						<label hlmFieldLabel for="field-connected-servers" class="font-normal">Connected servers</label>
					</div>
				</div>
			</fieldset>
			<hlm-field-separator />
			<div hlmField orientation="horizontal">
				<hlm-checkbox id="field-sync-desktop-documents" [checked]="true" />
				<div hlmFieldContent>
					<label hlmFieldLabel for="field-sync-desktop-documents">Sync Desktop & Documents folders</label>
					<p hlmFieldDescription>
						Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
					</p>
				</div>
			</div>
		</div>
	`,
})
export class FieldCheckboxPreview {}

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99/lifetime)

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';

@Component({
	selector: 'spartan-field-radio-preview',
	imports: [HlmFieldImports, HlmRadioGroupImports],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<fieldset hlmFieldSet>
			<label hlmFieldLabel>Subscription Plan</label>
			<p hlmFieldDescription>Yearly and lifetime plans offer significant savings.</p>
			<hlm-radio-group value="monthly">
				<div hlmField orientation="horizontal">
					<hlm-radio value="monthly" id="plan-monthly">
						<hlm-radio-indicator indicator />
					</hlm-radio>
					<label hlmFieldLabel for="plan-monthly" class="font-normal">Monthly ($9.99/month)</label>
				</div>
				<div hlmField orientation="horizontal">
					<hlm-radio value="yearly" id="plan-yearly">
						<hlm-radio-indicator indicator />
					</hlm-radio>
					<label hlmFieldLabel for="plan-yearly" class="font-normal">Yearly ($99.99/year)</label>
				</div>
				<div hlmField orientation="horizontal">
					<hlm-radio value="lifetime" id="plan-lifetime">
						<hlm-radio-indicator indicator />
					</hlm-radio>
					<label hlmFieldLabel for="plan-lifetime" class="font-normal">Lifetime ($299.99/lifetime)</label>
				</div>
			</hlm-radio-group>
		</fieldset>
	`,
})
export class FieldRadioPreview {}

Switch

Multi-factor authentication

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmSwitch } from '@spartan-ng/helm/switch';

@Component({
	selector: 'spartan-field-switch-preview',
	imports: [HlmFieldImports, HlmSwitch],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<div hlmField orientation="horizontal">
			<div hlmFieldContent>
				<label hlmFieldLabel for="field-2fa">Multi-factor authentication</label>
				<p hlmFieldDescription>
					Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent
					to your email.
				</p>
			</div>
			<hlm-switch id="field-2fa" />
		</div>
	`,
})
export class FieldSwitchPreview {}

Choice Card

Wrap HlmField directives inside HlmFieldLabel to create selectable field groups. This works with RadioItem , Checkbox and Switch components.

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

import { Component } from '@angular/core';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';

@Component({
	selector: 'spartan-field-choice-card-preview',
	imports: [HlmFieldImports, HlmRadioGroupImports],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<div hlmFieldGroup>
			<fieldset hlmFieldSet>
				<label hlmFieldLabel>Compute Environment</label>
				<p hlmFieldDescription>Select the compute environment for your cluster.</p>
				<hlm-radio-group value="kubernetes">
					<label hlmFieldLabel for="kubernetes">
						<div hlmField orientation="horizontal">
							<div hlmFieldContent>
								<div hlmFieldTitle>Kubernetes</div>
								<div hlmFieldDescription>Run GPU workloads on a K8s configured cluster.</div>
							</div>
							<hlm-radio value="kubernetes" id="kubernetes">
								<hlm-radio-indicator indicator />
							</hlm-radio>
						</div>
					</label>
					<label hlmFieldLabel for="virtual-machine">
						<div hlmField orientation="horizontal">
							<div hlmFieldContent>
								<div hlmFieldTitle>Virtual Machine</div>
								<div hlmFieldDescription>Access a VM configured cluster to run GPU workloads.</div>
							</div>
							<hlm-radio value="virtual-machine" id="virtual-machine">
								<hlm-radio-indicator indicator />
							</hlm-radio>
						</div>
					</label>
				</hlm-radio-group>
			</fieldset>
		</div>
	`,
})
export class FieldChoiceCardPreview {}

Field Group

Stack HlmField directives with HlmFieldGroup . Add HlmFieldSeparator to divide them.

Response

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Push notifications

Tasks

Get notified when tasks you've created have updates. Manage tasks

Push notifications

Email notifications

import { Component } from '@angular/core';
import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
import { HlmFieldImports } from '@spartan-ng/helm/field';

@Component({
	selector: 'spartan-field-group-preview',
	imports: [HlmFieldImports, HlmCheckbox],
	host: {
		class: 'w-full max-w-md',
	},
	template: `
		<div hlmFieldGroup>
			<fieldset hlmFieldSet>
				<label hlmFieldLabel>Response</label>
				<p hlmFieldDescription>
					Get notified when ChatGPT responds to requests that take time, like research or image generation.
				</p>
				<div hlmFieldGroup data-slot="checkbox-group">
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-group-push-notifications" disabled [checked]="true" />
						<label hlmFieldLabel for="field-group-push-notifications" class="font-normal">Push notifications</label>
					</div>
				</div>
			</fieldset>
			<hlm-field-separator />
			<fieldset hlmFieldSet>
				<label hlmFieldLabel>Tasks</label>
				<p hlmFieldDescription>
					Get notified when tasks you've created have updates.
					<a href="#">Manage tasks</a>
				</p>
				<div hlmFieldGroup data-slot="checkbox-group">
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-group-push-task" />
						<label hlmFieldLabel for="field-group-push-task" class="font-normal">Push notifications</label>
					</div>
					<div hlmField orientation="horizontal">
						<hlm-checkbox id="field-group-email-task" />
						<label hlmFieldLabel for="field-group-email-task" class="font-normal">Email notifications</label>
					</div>
				</div>
			</fieldset>
		</div>
	`,
})
export class FieldGroupPreview {}

Responsive Layout

Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
Horizontal fields: Set orientation="horizontal" on HlmField to align the label and control side-by-side. Pair with HlmFieldContent to keep descriptions aligned.
Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on HlmFieldGroup to switch orientations at specific breakpoints.

import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmTextarea } from '@spartan-ng/helm/textarea';

@Component({
	selector: 'spartan-field-responsive-layout-preview',
	imports: [HlmFieldImports, HlmInput, HlmTextarea, HlmButton],
	host: {
		class: 'w-full max-w-4xl',
	},
	template: `
		<form>
			<fieldset hlmFieldSet>
				<legend hlmFieldLegend>Profile</legend>
				<p hlmFieldDescription>Fill in your profile information.</p>
				<hlm-field-separator />
				<div hlmFieldGroup>
					<div hlmField orientation="responsive">
						<div hlmFieldContent>
							<label hlmFieldLabel for="field-responsive-name">Name</label>
							<p hlmFieldDescription>Provide your full name for identification</p>
						</div>
						<input hlmInput id="field-responsive-name" type="text" placeholder="Alex Cooper" />
					</div>
					<hlm-field-separator />
					<div hlmField orientation="responsive">
						<div hlmFieldContent>
							<label hlmFieldLabel for="field-responsive-message">Message</label>
							<p hlmFieldDescription>
								You can write your message here. Keep it short, preferably under 100 characters.
							</p>
						</div>
						<textarea
							hlmTextarea
							id="field-responsive-message"
							placeholder="Hello, World!"
							class="min-h-[100px] resize-none sm:min-w-[300px]"
						></textarea>
					</div>
					<hlm-field-separator />
					<div hlmField orientation="responsive">
						<button hlmBtn type="submit">Submit</button>
						<button hlmBtn type="button" variant="outline">Cancel</button>
					</div>
				</div>
			</fieldset>
		</form>
	`,
})
export class FieldResponsiveLayoutPreview {}

Validation and Errors

Add data-invalid to HlmField to switch the entire block into an error state.
Add aria-invalid on the input itself for assistive technologies.
Render FieldError immediately after the control or inside FieldContent to keep error messages aligned with the field.

<div hlmField data-invalid="true">
	<label hlmFieldLabel for="validation-error-email">Email</label>
	<input hlmInput id="validation-error-email" type="email" aria-invalid="true" />
	<hlm-field-error>Enter a valid email address.</hlm-field-error>
</div>

Accessibility

HlmFieldSet and HlmFieldLegend keep related controls grouped for keyboard and assistive tech users.
HlmField outputs role="group" so nested controls inherit labeling from HlmFieldLabel and HlmFieldLegend when combined.
Apply HlmFieldSeparator sparingly to ensure screen readers encounter clear section boundaries.

Helm API

HlmFieldContent

Selector: [hlmFieldContent],hlm-field-content

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldDescription

Selector: [hlmFieldDescription],hlm-field-description

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldError

Selector: hlm-field-error

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
error	Array<{ message: string } \| undefined>	-	-

HlmFieldGroup

Selector: [hlmFieldGroup],hlm-field-group

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldLabel

Selector: [hlmFieldLabel]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldLegend

Selector: legend[hlmFieldLegend]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
variant	'label' \| 'legend'	legend	-

HlmFieldSeparator

Selector: hlm-field-separator

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldSet

Selector: fieldset[hlmFieldSet]

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmFieldTitle

Selector: [hlmFieldTitle],hlm-field-title

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmField

Selector: [hlmField],hlm-field

Inputs

Prop	Type	Default	Description
orientation	FieldVariants['orientation']	vertical	-
class	ClassValue	-	-

Form Field

Empty