Examples
Basic usage
Properties
| Name | Type | Required | Description |
|---|---|---|---|
| @label | string | Yes | The label for the toggle field |
| @checked | boolean | No | Whether the toggle is checked |
| @disabled | boolean | No | Whether the toggle field is disabled |
Toggle
A simple toggle wrapper component with customizable label and checked state.
'%20rx='24'/%3e%3c!--%20Grille%20subtile%20en%20arrière-plan%20--%3e%3cline%20x1='25'%20y1='125'%20x2='175'%20y2='125'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3cline%20x1='25'%20y1='145'%20x2='175'%20y2='145'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3cline%20x1='25'%20y1='165'%20x2='175'%20y2='165'%20stroke='%23FFF'%20stroke-width='0.5'%20opacity='0.15'/%3e%3c!--%20Groupe%20flamme%20avec%20ombre%20--%3e%3cg%20filter='url(%23shadow)'%3e%3c!--%20Flamme%20principale%20--%3e%3cpath%20d='M100%2025%20C130%2042,%20150%2070,%20150%20100%20C150%20130,%20127%20155,%20100%20155%20C73%20155,%2050%20130,%2050%20100%20C50%2070,%2070%2042,%20100%2025%20Z'%20fill='url(%23flameGradient)'/%3e%3c!--%20Détails%20de%20la%20flamme%20--%3e%3cpath%20d='M100%2040%20C120%2052,%20130%2072,%20130%2095%20C130%20118,%20115%20135,%20100%20135%20C85%20135,%2070%20118,%2070%2095%20C70%2072,%2080%2052,%20100%2040%20Z'%20fill='%23FFF'%20opacity='0.6'/%3e%3c!--%20Cœur%20de%20la%20flamme%20--%3e%3cellipse%20cx='100'%20cy='95'%20rx='12'%20ry='18'%20fill='%23E04E39'/%3e%3cellipse%20cx='100'%20cy='90'%20rx='6'%20ry='10'%20fill='%23FF6B54'/%3e%3c/g%3e%3c!--%20Composants%20UI%20stylisés%20(comme%20des%20widgets)%20--%3e%3cg%20opacity='0.95'%3e%3c!--%20Input%20field%20--%3e%3crect%20x='30'%20y='168'%20width='60'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3ccircle%20cx='36'%20cy='173'%20r='2.5'%20fill='%23E04E39'/%3e%3c!--%20Dropdown/Select%20--%3e%3crect%20x='95'%20y='168'%20width='50'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3cpath%20d='M139%20170%20L143%20174%20L135%20174%20Z'%20fill='%23E04E39'/%3e%3c!--%20Toggle/Switch%20--%3e%3crect%20x='150'%20y='168'%20width='25'%20height='10'%20fill='%23FFF'%20rx='5'/%3e%3ccircle%20cx='167'%20cy='173'%20r='3.5'%20fill='%23E04E39'/%3e%3c/g%3e%3c/svg%3e)