Field

import { BuiField, BuiFieldLabel, BuiFieldDescription } from 'ng-blatui';

<div buiField>
  <label buiFieldLabel for="username">Username</label>
  <input id="username" buiInput type="text" placeholder="shadcn" />
  <p buiFieldDescription>This is your public display name.</p>
</div>

<div buiField orientation="horizontal">
  <div buiFieldContent>
    <label buiFieldLabel>Email notifications</label>
    <p buiFieldDescription>Receive emails about your account activity.</p>
  </div>
  <button buiSwitch aria-label="Email notifications"></button>
</div>

<div buiField orientation="horizontal">
  <button buiCheckbox aria-label="Accept terms"></button>
  <div buiFieldContent>
    <label buiFieldLabel>Accept terms and conditions</label>
    <p buiFieldDescription>You agree to our Terms of Service.</p>
  </div>
</div>

<div buiFieldGroup>
  <div buiField>
    <label buiFieldLabel for="name">Name</label>
    <input id="name" buiInput />
  </div>
  <button buiButton type="submit">Submit</button>
</div>

<div buiField>
  <label buiFieldLabel for="email">Email</label>
  <input id="email" buiInput value="not-an-email" aria-invalid="true" />
  <p buiFieldError>Please enter a valid email address.</p>
</div>

<fieldset buiFieldSet>
  <legend buiFieldLegend>Profile</legend>
  <div buiFieldGroup>… fields …</div>
</fieldset>

<!-- lay out related fields in a grid -->
<div class="grid grid-cols-2 gap-4">
  <div buiField><label buiFieldLabel for="f">First name</label><input id="f" buiInput /></div>
  <div buiField><label buiFieldLabel for="l">Last name</label><input id="l" buiInput /></div>
</div>