Fieldset

Import

                                                        
                                                        
                                                            import { FieldsetModule } from '@backbase/ui-ang/fieldset'
                                                        
                                                            

Usage

Use the bb-fieldset-ui component to group related form controls and labels, optionally providing a heading.

                                                        
                                                        
                                                            <!-- Basic fieldset usage with heading -->
                                                        <bb-fieldset-ui [heading]="'Personal information'">
                                                          <label for="firstName">First name</label>
                                                          <input id="firstName" type="text" />
                                                          <label for="lastName">Last name</label>
                                                          <input id="lastName" type="text" />
                                                        </bb-fieldset-ui>
                                                        
                                                            

Inputs

disabled

The disabled input disables all form items within the fieldset. Defaults to false.

                                                        
                                                        
                                                            <!-- Fieldset with all form items disabled -->
                                                        <bb-fieldset-ui [disabled]="true" [heading]="'Account details'">
                                                            <label for="account">Account</label>
                                                            <input id="account" type="text" />
                                                        </bb-fieldset-ui>
                                                        
                                                            

heading

The heading input sets the caption for the fieldset element, rendered as a <legend>. If not provided, no heading is shown.

                                                        
                                                        
                                                            <!-- Fieldset with heading -->
                                                        <bb-fieldset-ui [heading]="'Contact information'">
                                                            <label for="email">Email</label>
                                                            <input id="email" type="email" />
                                                        </bb-fieldset-ui>
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviours and configuration options to ensure a fully accessible experience for all users.

• The component uses a semantic <fieldset> element, which groups related form controls for assistive technologies.
• The optional heading is rendered as a <legend>, providing a caption for the grouped controls.
• The disabled input disables all descendant form controls, as per HTML fieldset behavior.