<ui-field class="min-w-0 [&:not(:has([data-flux-field])):has([data-flux-control][disabled])>[data-flux-label]]:opacity-50 [&:has(>[data-flux-radio-group][disabled])>[data-flux-label]]:opacity-50 [&:has(>[data-flux-checkbox-group][disabled])>[data-flux-label]]:opacity-50 grid gap-x-3 gap-y-1.5 has-[[data-flux-label]~[data-flux-control]]:grid-cols-[1fr_auto] has-[[data-flux-control]~[data-flux-label]]:grid-cols-[auto_1fr] [&>[data-flux-control]~[data-flux-description]]:row-start-2 [&>[data-flux-control]~[data-flux-description]]:col-start-2 [&>[data-flux-control]~[data-flux-error]]:col-span-2 [&>[data-flux-control]~[data-flux-error]]:mt-1 [&>[data-flux-label]~[data-flux-control]]:row-start-1 [&>[data-flux-label]~[data-flux-control]]:col-start-2" data-flux-field> <ui-label class="inline-flex items-center text-sm font-medium [:where(&)]:text-zinc-800 [:where(&)]:dark:text-white" data-flux-label> Dark mode </ui-label> <ui-switch class="group h-5 w-8 min-w-8 relative inline-flex items-center outline-offset-2 rounded-full transition bg-zinc-800/15 [&[disabled]]:opacity-50 dark:bg-transparent dark:border dark:border-white/20 dark:[&[disabled]]:border-white/10 [print-color-adjust:exact] data-checked:bg-(--color-accent) data-checked:border-0" x-data="" x-model="$flux.dark" label="Dark mode" data-flux-control data-flux-switch> <span class="size-3.5 rounded-full transition translate-x-[3px] dark:translate-x-[2px] rtl:-translate-x-[3px] dark:rtl:-translate-x-[2px] bg-white group-data-checked:translate-x-[15px] rtl:group-data-checked:-translate-x-[15px] group-data-checked:bg-(--color-accent-foreground)"></span> </ui-switch> <div role="alert" aria-live="polite" aria-atomic="true" class="mt-3 text-sm font-medium text-red-500 dark:text-red-400 hidden" data-flux-error> </div> </ui-field>

Create account

Share Moments. Inspire the World.

Create, connect, and discover endless inspiration.

Join Mustagram Create account