📕
[ARCHIVED] Cape Agulhas App
  • Home
  • User guide
    • Installation
    • User accounts and service requests
    • Supported devices
    • Troubleshooting
    • How do I reset notification preferences?
    • Enable Notifications from Settings Page
  • Administrator guide
    • Managing content
    • Pages
      • Councillors
      • Services
    • Snippets
    • Notices and Notifications
    • Important Contacts
    • Icons
    • App Environments
    • Administrator accounts
  • API
    • Overview
    • Web hooks
    • Web push
    • Accounts
    • User authentication (JWT Token)
    • Service Requests
  • Development
  • Software Development
  • Architectural Decision Records
    • ADR01: Single page app vs server-side templating
    • ADR02: custom web push backend or which service
  • Collaborator Service Requests Integration
  • Deployment
  • Design System and Component Library
    • Webflow exports & changelog
    • Component library
    • Link Blocks
    • Form Elements
    • Grids
Powered by GitBook
On this page
  • Form containers
  • Form checkbox
  • Usage
  • Container classes
  • Input field
  • Usage
  • Container classes
  • Form labels
  • Usage
  • Container classes

Was this helpful?

  1. Design System and Component Library

Form Elements

PreviousLink BlocksNextGrids

Last updated 4 years ago

Was this helpful?

Form containers

Form checkbox

Usage

Checkboxes are usually added inside of the form__inner

Container classes

form-checkbox

Input field

Usage

Input fields without labels below or above can be added with a form__inner

Container classes

input-field

Form labels

Usage

When using a form label, it needs to be housed along with the element it is being combined with inside of a form-item

Container classes

form-label

All forms need to be contained within a .form container and .form__inner
Checked and unchecked state of the form checkbox
Checkbox components
Basic form input field
input-field added within a form-inner
Form input field with label below
Elements within a form-item