alighasami
3d5eaf9445
Security: Sync from Public / sync-from-public (push) Has been cancelled
Test: Benchmark Nightly / build (push) Has been cancelled
Test: Benchmark Nightly / Notify Cats on failure (push) Has been cancelled
CI: Python / Checks (push) Has been cancelled
Test: Evals Python / Workflow Comparison Python (push) Has been cancelled
Util: Check Docs URLs / check-docs-urls (push) Has been cancelled
Test: Visual Storybook / Cloudflare Pages (push) Has been cancelled
Test: E2E Performance / build-and-test-performance (push) Has been cancelled
Test: Workflows Nightly / Run Workflow Tests (push) Has been cancelled
Util: Cleanup CI Docker Images / Delete stale CI images (push) Has been cancelled
Test: Benchmark Destroy Env / build (push) Has been cancelled
Util: Update Node Popularity / update-popularity (push) Has been cancelled
Test: E2E Coverage Weekly / Coverage Tests (push) Has been cancelled
1.4 KiB
1.4 KiB
Component specification
Copy this file next to the template and call it component-<component-name-kebap-case>.md.
This component specification describes the public API of a component intended to be added to the component library of our design system. To be made available for review in a GitHub pull request before implementation. With two approvals, you can be quite sure that the API won't be challenged anymore on the implementation PR.
- Component Name: N8nCheckbox
- Element+ Component: ElCheckbox
- Reka UI Component: Checkbox
- Nuxt UI Component: Checkbox
^ Only list what exists in the external component libraries. Nuxt uses Reka under the hood. We use it as guideline on for the public API of our reka-ui-based components
Public API Definition
Props
modelValue:boolean|default: falselabel?:string| provided via slotdisabled?:boolean|default: falsetooltipText?:stringsize?:'small' | 'medium'|default: 'medium'
Events
update:modelValue(value: boolean)change(value: boolean)
Slots
label:{ label?: string | undefined; }
CSS Variables
--checkbox--border-color--checkbox--border-color--checked
Template usage example
<N8nCheckbox size="medium" label="Subscribe to newsletter" />