UI Groups
Input Groups
The UIGroupsToggles component is designed to group related boolean options (checkboxes) together. It follows a specific grid layout to align titles on the left and options on the right.
Checkboxes & Radios Layout
Live interaction with the model.
General Settings
Advanced Options
(Required)
User Privacy
Notifications
Security
Manage your account security and access levels.
Two-Factor AuthenticationSecure your account with an authenticator app.
Active SessionsManage devices currently logged into your account.
Delete AccountPermanently remove your data and access.
Profile Info
Publicly visible information.
// Current State: {
"option1": false,
"option2": true,
"option3": false,
"option4": true,
"option5": false,
"option6": false,
"option7": true
}
Layout Setup & Logic
- Stacking: The component is designed to be stacked directly on top of each other within a parent
div. - Automatic Borders: It uses
first:border-0andborder-tinternally. Do not add margins between instances, or the borders will look incorrect. - Grid System: It uses a 12-column grid.
- Title:col-span-3(Desktop)- Content:col-span-9(Desktop) - State Handling: Takes a single object (Record) as
v-model. Keys in theitemsprop must match keys in the model object.
Code Usage
vue