A wrapper component for forms

MathematicsGeographyPhysicsHistoryCancelCreate course
  <sl-form-field hint="Please enter a descriptive name for the course." label="Course name">
    <sl-text-field name="courseName" required></sl-text-field>

  <sl-form-field label="Subjects">
    <sl-checkbox-group name="subjects">

  <sl-button-bar align="end">
    <sl-button fill="outline">Cancel</sl-button>
    <sl-button variant="primary">Create course</sl-button>

When to use

The form component should be used whenever you have a form that needs to be filled out by a user. The form component is a container for form fields.

When not to use

Do not use the form component if you only have one form field. Usually this indicates a specific usage of a form control, and that it should be used on its own.

Interactive example