Form Elements

Oat provides clean, accessible form components built on semantic HTML. Use the ng-oat-* form components for consistent styling and Signal Forms compatibility.

Component	Selector	Description
`NgOatInput`	`ng-oat-input`	Text, email, password, number, date, and other input types
`NgOatTextarea`	`ng-oat-textarea`	Multi-line text area
`NgOatSelect`	`ng-oat-select`	Dropdown select with typed options
`NgOatCheckbox`	`ng-oat-checkbox`	Checkbox with label
`NgOatRadioGroup`	`ng-oat-radio-group`	Radio button group with label & options

Import & Usage

typescript

import { Component, signal } from '@angular/core';
import {
  NgOatInput, NgOatTextarea, NgOatSelect,
  NgOatCheckbox, NgOatRadioGroup,
  type NgOatSelectOption,
} from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatInput, NgOatTextarea, NgOatSelect, NgOatCheckbox, NgOatRadioGroup],
  template: `
    <ng-oat-input label="Name" placeholder="Enter name" [(value)]="name" />
    <ng-oat-select label="Country" [options]="countries" />
    <ng-oat-textarea label="Message" [rows]="3" />
    <ng-oat-checkbox label="I agree" [(checked)]="agreed" />
  `,
})
export class ExampleComponent {
  name = signal('');
  agreed = signal(false);
  countries: NgOatSelectOption[] = [
    { label: 'US', value: 'us' },
    { label: 'UK', value: 'uk' },
  ];
}

Text Inputs

Name

Password

Disabled

html

<ng-oat-input label="Name" placeholder="Enter your name" />
<ng-oat-input label="Email" type="email" placeholder="you@example.com" />
<ng-oat-input label="Password" type="password" placeholder="Password" />
<ng-oat-input label="Disabled" placeholder="Cannot edit" [disabled]="true" />

Number & Range Inputs

Quantity

Date

Date & Time

Color

html

<ng-oat-input label="Quantity" type="number" placeholder="0" [min]="0" [max]="100" />
<ng-oat-input label="Date" type="date" />
<ng-oat-input label="Date &amp; Time" type="datetime-local" />
<ng-oat-input label="Color" type="color" />

Select

Country

html

<ng-oat-select
  label="Country"
  placeholder="Select a country"
  [options]="countries" />

// In component class:
countries: NgOatSelectOption[] = [
  { label: 'United States', value: 'us' },
  { label: 'United Kingdom', value: 'uk' },
  ...
];

Textarea

Message

html

<ng-oat-textarea label="Message" placeholder="Your message..." [rows]="4" />

Checkbox

I agree to the terms and conditions

Subscribe to newsletter

Disabled option

html

<ng-oat-checkbox label="I agree to the terms" />
<ng-oat-checkbox label="Subscribe to newsletter" />
<ng-oat-checkbox label="Disabled option" [disabled]="true" />

Radio Group

Preference Option A Option B Option C

html

<ng-oat-radio-group
  label="Preference"
  [options]="preferences" />

// In component class:
preferences: NgOatRadioOption[] = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b' },
  { label: 'Option C', value: 'c' },
];

Two-way Binding

All form components support two-way binding with [(value)] or [(checked)].

Your name

Hello, ...!

Enable dark mode

Dark mode is OFF

html

<ng-oat-input label="Your name" placeholder="Type here..." [(value)]="nameValue" />
<p>Hello, {{ nameValue() || '...' }}!</p>

<ng-oat-checkbox label="Enable dark mode" [(checked)]="darkMode" />
<p>Dark mode is {{ darkMode() ? 'ON' : 'OFF' }}</p>

Input Groups

Use native .group on a <fieldset> to combine inputs with buttons or labels.

https://

html

<fieldset class="group">
  <legend>https://</legend>
  <input type="url" placeholder="subdomain" />
  <select aria-label="Select a subdomain">
    <option>.example.com</option>
    <option>.example.net</option>
  </select>
  <button>Go</button>
</fieldset>

<fieldset class="group">
  <input type="text" placeholder="Search" />
  <button>Go</button>
</fieldset>

Complete Form

A full form built entirely with ng-oat form components.

html

<form>
  <ng-oat-input label="Name" placeholder="Enter your name" [required]="true" />
  <ng-oat-input label="Email" type="email" placeholder="you@example.com" [required]="true" />
  <ng-oat-input label="Password" type="password" placeholder="Password" [required]="true" />
  <ng-oat-select label="Role" placeholder="Select a role" [options]="roles" />
  <ng-oat-textarea label="Bio" placeholder="Tell us about yourself..." [rows]="3" />
  <ng-oat-checkbox label="I agree to the terms" />
  <ng-oat-radio-group label="Notification preference" [options]="notifications" />
  <label data-field>
    Volume
    <input type="range" min="0" max="100" value="50" />
  </label>
  <button type="submit">Submit</button>
</form>