Inline
InlineToggle
Toggle switch that immediately persists a boolean field change via useXCrud.
Inline
The Inline category provides click-to-edit field components for detail views and data tables. Each component follows the same pattern: display mode (read-only with a subtle hover affordance) → edit mode → optimistic save via useXCrud → success/error indicator. All rollback on API failure.
Components
<XAInlineToggle />
A USwitch that immediately PATCHes a boolean field on toggle. Optimistically updates the value then reverts on API failure. Shows a text label next to the switch that reflects the current state.
<XAInlineToggle
v-model="record.isActive"
field="isActive"
endpoint="/api/records"
:entity-id="record.id"
true-label="Active"
false-label="Inactive"
:show-label="true"
size="sm"
@save="onToggled"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Current boolean value (v-model) |
field | String | required | Field name to update |
endpoint | String | required | API endpoint for useXCrud |
entityId | String | Number | required | Record ID |
trueLabel | String | 'Yes' | Label text when value is true |
falseLabel | String | 'No' | Label text when value is false |
showLabel | Boolean | true | Show text label next to switch |
labelClass | String | 'text-sm' | Additional CSS classes for the label |
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Switch size |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | Boolean | Optimistic value update |
save | newValue, previousValue | Save succeeded |
error | Error | Save failed |
AI Context
component: XAInlineToggle
package: "@xenterprises/nuxt-x-app"
category: Inline
auto-import: true
use-when: >
Detail pages where users should be able to toggle boolean flags (active/inactive,
enabled/disabled) without navigating to a separate edit form.
key-patterns:
- Requires field, endpoint, and entityId props
- Uses useXCrud internally — no manual API call needed
- Performs optimistic updates and reverts on failure
- Use v-model to keep the parent state in sync