Form field is a wrapping component that provides consistent styling and behavior for form control elements.
It's used to style certain controls that would otherwise be impossible to style with normal css and organize labels, hints, and error messages alongside their associated form controls.
The following Daffodil Design components are designed to work inside a form field:
To use form field in a standalone component, import DAFF_FORM_FIELD_COMPONENTS directly into your custom component:
import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
imports: [
DAFF_FORM_FIELD_COMPONENTS,
],
})
export class CustomComponent {}
To use form field in a module, import DaffFormFieldModule into your custom module:
import { NgModule } from '@angular/core';
import { DaffFormFieldModule } from '@daffodil/design/form-field';
import { CustomComponent } from './custom.component';
@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffFormFieldModule,
],
})
export class CustomComponentModule { }
Deprecation notice: This method is deprecated. It's recommended to update all custom components to standalone.
Form field supports two appearances: fluid and fixed. It will default to fluid if an appearance is not specified.
fluid: alternate, stylized UI where the label is placed inside of the form control.fixed: corresponds with a traditional style where the label is positioned outside and above the form control.Use <daff-form-label> to help users understand what information to enter into a form control. Form fields should always have labels. If a form control is marked as required, an asterisk will be attached to the label to indicate that it's a required field.
<daff-form-field>
<daff-form-label>First Name</daff-form-label>
<input daff-input type="text" name="first-name" required />
</daff-form-field>
Deprecation notice: The
DaffFormLabelDirective(usingdaffFormLabelon<label>) is deprecated and will be removed inv1.0.0. Use<daff-form-label>instead for new implementations.
The id property allows you to set a custom identifier for the form field. While auto-labelling is supported for native HTML form elements (e.g. <input>, <select>, and <textarea>) to ensure that accessibility is baked into the component, it's recommended to set meaningful, custom IDs for better accessibility and form management.
<daff-form-field id="user-email-address">
<daff-form-label>Email Address</daff-form-label>
<input daff-input type="email" />
</daff-form-field>
When you provide a custom
id, the<daff-form-label>automatically gets the correctforattribute that matches the control'sid.
Hints are shown below the form field and are used to provide helpful information that assists users in correctly completing a field.
<daff-form-field>
<daff-form-label>Password</daff-form-label>
<input daff-input type="text" name="password" />
<daff-hint>Password must have 8 characters.</daff-hint>
</daff-form-field>
Use the validated property to show hints with validation styling:
<daff-form-field>
<daff-form-label>Password</daff-form-label>
<input daff-input type="text" name="password" />
<daff-hint [validated]="isControlValid">Password must have 8 characters.</daff-hint>
</daff-form-field>
Error messages are used to display validation errors. They are shown under the form field and are placed last if hints are also used.
<daff-form-field>
<daff-form-label>Email*</daff-form-label>
<input daff-input type="text" name="email" />
@if (control.errors?.required) {
<daff-error-message>Email is a required field.</daff-error-message>
}
</daff-form-field>
Use the [daffFormFieldAction] directive to add an action element to a form field.
Use the [daffPrefix] and [daffSuffix] directives to display leading or trailing visuals, typically icons, on either side of the form control.
In a fluid appearance, avoid using suffix alongside an action.
In addition to the controls that Daffodil Design provides, you can create your own custom control by using the DaffFormFieldControl interface.
DaffFormFieldControl interface.DaffFormFieldComponent to hook into. You can do this by adding the key to the providers key of your component:@Component({
selector: 'custom-control-component',
providers: [
{
provide: DaffFormFieldControl,
useExisting: CustomControlComponent
}
],
})
export class CustomControlComponent implements DaffFormFieldControl<any> {}
<daff-form-label> for the best experience with auto-labelling controls.For controls that support auto-labelling, the component automatically:
for and id attributes.If a <daff-form-label> is not specified, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.
<daff-form-field>
<label for="first-name">First Name</label>
<input type="text" daff-input name="first-name" id="first-name" />
</daff-form-field>
<daff-hint> and <daff-error-message> are linked to the form control via aria-describedby.<daff-error-message> is set to aria-live="polite" by default so that assistive technology only announce errors when they appear.This error appears when the DaffFormFieldComponent is missing a child control. Since form field is intended to only be used with a child component that implements DaffFormFieldControl, this error enforces that constraint at development time. To fix this, make sure that the form field has a child component that implements this interface.