Radio Rails Components
Radio button components for single-choice selections, payment methods, and configuration options. Built with Tailwind CSS and styled to match your Rails application.
Installation
1. Custom CSS
Radio button styling is included in the following forms CSS:
/* Forms */
label,
.label {
@apply text-sm leading-6 font-medium text-neutral-700;
@apply dark:text-neutral-100;
}
.form-input[disabled] {
@apply cursor-not-allowed bg-neutral-200;
}
/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-width: 1px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
.form-control {
@apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base leading-6 text-neutral-900 shadow-sm ring-1 ring-neutral-300 outline-hidden ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500;
}
@media (min-width: 640px) {
.form-control {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
.form-control[disabled] {
@apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
}
.form-control.error {
@apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500;
}
select:not([multiple]) {
@apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base leading-6 text-neutral-900 shadow-sm ring-1 ring-neutral-300 outline-hidden ring-inset focus:ring-2 focus:ring-neutral-600;
/* Custom dropdown arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
padding-right: 2.5rem;
}
@media (min-width: 640px) {
select:not([multiple]) {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
/* Dark mode styling for single select */
.dark {
select:not([multiple]) {
@apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dark:focus:ring-neutral-500;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
}
select:not([multiple])[disabled] {
@apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
}
select[multiple] {
@apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base leading-6 text-neutral-900 shadow-sm outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600;
min-height: 120px;
}
select[multiple] option {
@apply rounded-md;
}
@media (min-width: 640px) {
select[multiple] {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
/* Dark mode styling for multiple select */
.dark {
select[multiple] {
@apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dark:focus:ring-neutral-500;
}
}
select[multiple][disabled] {
@apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
}
option {
@apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100;
}
option:checked {
@apply bg-neutral-100 dark:bg-neutral-600;
}
option:hover {
@apply bg-neutral-50 dark:bg-neutral-600;
}
.caret {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800;
}
[type="checkbox"] {
@apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white checked:border-neutral-700 checked:bg-neutral-800 indeterminate:border-neutral-700 indeterminate:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-white/20 dark:checked:bg-neutral-900 dark:indeterminate:border-neutral-500 dark:indeterminate:bg-neutral-600 dark:focus-visible:outline-neutral-200 dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
}
[type="checkbox"]:checked {
@apply text-white dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type="checkbox"]:indeterminate {
@apply border-neutral-300 bg-neutral-800 text-white dark:border-neutral-600 dark:!bg-neutral-700 dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e");
background-size: 75% 75%;
background-position: center;
background-repeat: no-repeat;
}
[type="checkbox"]:disabled {
@apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
}
[type="checkbox"]:disabled:checked {
@apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
}
[type="checkbox"]:indeterminate:hover {
@apply bg-neutral-800 dark:border-neutral-600 dark:!bg-neutral-700;
}
[type="radio"] {
@apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white checked:border-neutral-700 checked:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-white/20 dark:checked:bg-neutral-900 dark:focus-visible:outline-neutral-200 dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
}
[type="radio"]:checked {
@apply text-white dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type="radio"]:disabled {
@apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
}
[type="radio"]:disabled:checked {
@apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
}
/* Datalist styling */
input[list] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Replace default datalist arrow in WebKit browsers */
input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator {
display: none !important;
-webkit-appearance: none !important;
}
input[list].replace-default-datalist-arrow {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
}
/* Dark mode datalist arrow */
.dark {
input[list].replace-default-datalist-arrow {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
}
Examples
Basic Radio
Simple radio button group for payment methods, including checked and disabled states.
<fieldset class="space-y-4">
<legend class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-4">Payment Method</legend>
<div class="flex items-center gap-2">
<input type="radio" id="payment-card" name="payment" value="card" checked>
<label for="payment-card" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Credit Card
</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" id="payment-paypal" name="payment" value="paypal">
<label for="payment-paypal" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
PayPal
</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" id="payment-bank" name="payment" value="bank">
<label for="payment-bank" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Bank Transfer
</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" id="payment-crypto" name="payment" value="crypto" disabled>
<label for="payment-crypto" class="text-sm font-medium text-neutral-400 dark:text-neutral-500 cursor-not-allowed opacity-50">
Cryptocurrency (Coming Soon)
</label>
</div>
</fieldset>Radio with Descriptions
Radio buttons with additional descriptive text, perfect for subscription plans or service tiers.
<fieldset class="space-y-4 max-w-md">
<legend class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-4">Subscription Plan</legend>
<div class="flex items-start gap-3">
<input type="radio" id="plan-basic" name="subscription" value="basic" class="mt-1">
<div class="flex-1">
<label for="plan-basic" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
Basic Plan
</label>
<p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
Perfect for individuals getting started with basic features
</p>
</div>
</div>
<div class="flex items-start gap-3">
<input type="radio" id="plan-professional" name="subscription" value="professional" checked class="mt-1">
<div class="flex-1">
<label for="plan-professional" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
Professional Plan
</label>
<p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
Advanced features for growing businesses and teams
</p>
</div>
</div>
<div class="flex items-start gap-3">
<input type="radio" id="plan-enterprise" name="subscription" value="enterprise" class="mt-1">
<div class="flex-1">
<label for="plan-enterprise" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
Enterprise Plan
</label>
<p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
Full-featured solution with priority support and custom integrations
</p>
</div>
</div>
</fieldset>Radio Cards
Card-style radio buttons for pricing plans with enhanced visual hierarchy and selection states.
<fieldset class="space-y-3 max-w-sm w-full">
<legend class="sr-only">Choose your plan</legend>
<label for="pricing-startup" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="pricing-startup" name="pricing" value="startup" class="absolute left-4">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Startup</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">$39 / month</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">$468 / year</span>
</div>
</div>
</label>
<label for="pricing-pro" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="pricing-pro" name="pricing" value="pro" class="absolute left-4" checked>
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Pro</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">$69 / month</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">$828 / year</span>
</div>
</div>
</label>
<label for="pricing-enterprise" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="pricing-enterprise" name="pricing" value="enterprise" class="absolute left-4">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Enterprise</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">$129 / month</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">$1,548 / year</span>
</div>
</div>
</label>
</fieldset>Radio Cards with Icons
Radio cards with icons.
<fieldset class="space-y-3 max-w-md w-full">
<p class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-4">Where did you hear about us?</p>
<label for="source-seo" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-seo" name="source" value="seo" class="absolute left-4">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Search Engine</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you on Google or other search engines</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg>
</span>
</div>
</div>
</label>
<label for="source-ai" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-ai" name="source" value="ai" class="absolute left-4">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">AI conversation</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you through an AI assistant or chatbot</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75,.75h-4.5c-.827,0-1.5,.673-1.5,1.5v2c0,.827,.673,1.5,1.5,1.5h.5v2l2.227-2h1.773c.827,0,1.5-.673,1.5-1.5V2.25c0-.827-.673-1.5-1.5-1.5Z"></path><path d="M15.25,8.25v6c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2v-5.5c0-1.105,.895-2,2-2h4.38"></path><circle cx="5.5" cy="11" r="1" fill="currentColor" data-stroke="none" stroke="none"></circle><circle cx="11.5" cy="11" r="1" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M7.5,12h2c.276,0,.5,.224,.5,.5h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.276,.224-.5,.5-.5Z" fill="currentColor" data-stroke="none" stroke="none"></path><line x1="5.25" y1="3.75" x2="5.25" y2="6.75"></line><circle cx="5.25" cy="2.5" r="1.5" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg>
</span>
</div>
</div>
</label>
<label for="source-social" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-social" name="source" value="social" class="absolute left-4" checked>
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Social Media</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you on Facebook, Instagram, or other social media</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.25,7.494c0-.48,.173-.944,.486-1.307L10,1.25h0c.854,.427,1.25,1.428,.92,2.324l-1.17,3.176h4.402c1.313,0,2.269,1.243,1.933,2.512l-1.191,4.5c-.232,.877-1.026,1.488-1.933,1.488H7.25c-1.105,0-2-.895-2-2"></path><rect x="1.75" y="6.75" width="3.5" height="8.5" rx="1" ry="1"></rect></g></svg>
</span>
</div>
</div>
</label>
<label for="source-referral" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-referral" name="source" value="referral" class="absolute left-4">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Referral</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you through a colleague or friend</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="12.345" y1="11.75" x2="15.25" y2="11.75"></line><path d="M8.779,4.67l-.231-.313c-.283-.382-.73-.608-1.206-.608h-1.458c-.388,0-.761,.151-1.041,.42l-1.867,1.8c-.07,.067-.148,.123-.232,.167"></path><path d="M2.75,11.75h1.26c.303,0,.59,.138,.78,.374l1.083,1.349c.596,.742,1.632,.962,2.478,.525l3.274-1.693c1.111-.574,1.428-2.016,.661-3.003l-1.648-2.122"></path><path d="M15.258,6.138c-.085-.044-.163-.1-.233-.168l-1.867-1.8c-.28-.269-.653-.42-1.041-.42h-1.807c-.404,0-.791,.163-1.074,.453l-2.495,2.558c-.498,.51-.493,1.326,.011,1.83h0c.447,.447,1.15,.508,1.668,.145l2.83-1.985"></path><path d="M.75,5.25H1.75c.552,0,1,.448,1,1v6c0,.552-.448,1-1,1H.75"></path><path d="M17.25,5.25h-1c-.552,0-1,.448-1,1v6c0,.552,.448,1,1,1h1"></path></g></svg>
</span>
</div>
</div>
</label>
</fieldset>Radio Cards with Conditional Fields
Radio cards with conditional fields that appear based on the selected option. Uses a Stimulus controller for dynamic field visibility and enhanced user interaction.
<div class="space-y-6 max-w-md w-full"
data-controller="conditional-radio"
data-conditional-radio-field-map-value='{"seo": "search", "ai": "ai", "social": "social", "other": "other"}'>
<fieldset class="space-y-3">
<p class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-4">Where did you hear about us?</p>
<!-- Search Engine Option -->
<label for="source-seo-conditional" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-seo-conditional" name="source" value="seo" class="absolute left-4" data-action="change->conditional-radio#change">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Search Engine</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you on Google or other search engines</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75 15.75L11.6386 11.6386"></path> <path d="M7.75 13.25C10.7875 13.25 13.25 10.7875 13.25 7.75C13.25 4.7125 10.7875 2.25 7.75 2.25C4.7125 2.25 2.25 4.7125 2.25 7.75C2.25 10.7875 4.7125 13.25 7.75 13.25Z"></path></g></svg>
</span>
</div>
</div>
</label>
<!-- AI Conversation Option -->
<label for="source-ai-conditional" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-ai-conditional" name="source" value="ai" class="absolute left-4" data-action="change->conditional-radio#change">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">AI conversation</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you through an AI assistant or chatbot</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M15.75,.75h-4.5c-.827,0-1.5,.673-1.5,1.5v2c0,.827,.673,1.5,1.5,1.5h.5v2l2.227-2h1.773c.827,0,1.5-.673,1.5-1.5V2.25c0-.827-.673-1.5-1.5-1.5Z"></path><path d="M15.25,8.25v6c0,1.105-.895,2-2,2H3.75c-1.105,0-2-.895-2-2v-5.5c0-1.105,.895-2,2-2h4.38"></path><circle cx="5.5" cy="11" r="1" fill="currentColor" data-stroke="none" stroke="none"></circle><circle cx="11.5" cy="11" r="1" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M7.5,12h2c.276,0,.5,.224,.5,.5h0c0,.828-.672,1.5-1.5,1.5h0c-.828,0-1.5-.672-1.5-1.5h0c0-.276,.224-.5,.5-.5Z" fill="currentColor" data-stroke="none" stroke="none"></path><line x1="5.25" y1="3.75" x2="5.25" y2="6.75"></line><circle cx="5.25" cy="2.5" r="1.5" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg>
</span>
</div>
</div>
</label>
<!-- Social Media Option -->
<label for="source-social-conditional" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-social-conditional" name="source" value="social" class="absolute left-4" data-action="change->conditional-radio#change">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Social Media</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you on Facebook, Instagram, or other social media</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M5.25,7.494c0-.48,.173-.944,.486-1.307L10,1.25h0c.854,.427,1.25,1.428,.92,2.324l-1.17,3.176h4.402c1.313,0,2.269,1.243,1.933,2.512l-1.191,4.5c-.232,.877-1.026,1.488-1.933,1.488H7.25c-1.105,0-2-.895-2-2"></path><rect x="1.75" y="6.75" width="3.5" height="8.5" rx="1" ry="1"></rect></g></svg>
</span>
</div>
</div>
</label>
<!-- Referral Option -->
<label for="source-referral-conditional" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-referral-conditional" name="source" value="referral" class="absolute left-4" data-action="change->conditional-radio#change">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Referral</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you through a colleague or friend</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><line x1="12.345" y1="11.75" x2="15.25" y2="11.75"></line><path d="M8.779,4.67l-.231-.313c-.283-.382-.73-.608-1.206-.608h-1.458c-.388,0-.761,.151-1.041,.42l-1.867,1.8c-.07,.067-.148,.123-.232,.167"></path><path d="M2.75,11.75h1.26c.303,0,.59,.138,.78,.374l1.083,1.349c.596,.742,1.632,.962,2.478,.525l3.274-1.693c1.111-.574,1.428-2.016,.661-3.003l-1.648-2.122"></path><path d="M15.258,6.138c-.085-.044-.163-.1-.233-.168l-1.867-1.8c-.28-.269-.653-.42-1.041-.42h-1.807c-.404,0-.791,.163-1.074,.453l-2.495,2.558c-.498,.51-.493,1.326,.011,1.83h0c.447,.447,1.15,.508,1.668,.145l2.83-1.985"></path><path d="M.75,5.25H1.75c.552,0,1,.448,1,1v6c0,.552-.448,1-1,1H.75"></path><path d="M17.25,5.25h-1c-.552,0-1,.448-1,1v6c0,.552,.448,1,1,1h1"></path></g></svg>
</span>
</div>
</div>
</label>
<!-- Other Option -->
<label for="source-other-conditional" class="relative py-3 px-4 flex items-center font-medium bg-white text-neutral-800 rounded-xl cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="source-other-conditional" name="source" value="other" class="absolute left-4" data-action="change->conditional-radio#change">
<div class="flex-1 ml-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Other</h3>
<p class="text-xs text-neutral-500 dark:text-neutral-400">I found you through another source</p>
</div>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="18" height="18" viewBox="0 0 18 18"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><circle cx="9" cy="9" r="6.75"></circle><path d="M9 12V9.75"></path><circle cx="9" cy="6.75" r="0.75" fill="currentColor" data-stroke="none" stroke="none"></circle></g></svg>
</span>
</div>
</div>
</label>
</fieldset>
<!-- Conditional Fields Section -->
<div class="space-y-4">
<!-- Search Engine Details - Only visible when Search Engine is selected -->
<div class="hidden" data-conditional-radio-target="conditionalField" data-conditional-field="search">
<fieldset>
<legend class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-3">Which search engine?</legend>
<div class="flex gap-2 flex-wrap">
<div class="flex items-center gap-2">
<label for="search-google" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="search-google" name="search_engine" value="google" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Google
<svg width="25" height="25" class="size-4" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4062_36866)"><path d="M24.2407 12.3791C24.2407 11.5704 24.1624 10.7356 24.032 9.953H12.7363V14.5704H19.2059C18.945 16.0574 18.0842 17.3617 16.8059 18.1965L20.6668 21.1965C22.9363 19.0834 24.2407 16.0052 24.2407 12.3791Z" fill="#4280EF" /><path d="M12.7347 24.0661C15.9695 24.0661 18.6825 22.9965 20.6651 21.1704L16.8043 18.1965C15.7347 18.9269 14.3521 19.3443 12.7347 19.3443C9.60428 19.3443 6.9695 17.2313 6.00428 14.4139L2.03906 17.4661C4.07385 21.5095 8.19558 24.0661 12.7347 24.0661Z" fill="#34A353" /><path d="M6.00453 14.3878C5.50888 12.9008 5.50888 11.2834 6.00453 9.79646L2.03932 6.7182C0.343665 10.1095 0.343665 14.1008 2.03932 17.466L6.00453 14.3878Z" fill="#F6B704" /><path d="M12.7347 4.86602C14.4304 4.83993 16.0999 5.49211 17.326 6.66602L20.7434 3.22254C18.5782 1.18776 15.7086 0.0921052 12.7347 0.118192C8.19558 0.118192 4.07385 2.67471 2.03906 6.71819L6.00428 9.79646C6.9695 6.95298 9.60428 4.86602 12.7347 4.86602Z" fill="#E54335" /></g><defs><clipPath id="clip0_4062_36866"><rect width="23.4783" height="24" fill="white" transform="translate(0.761719 0.0921631)" /></clipPath></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="search-bing" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="search-bing" name="search_engine" value="bing" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Bing
<svg width="16" height="25" class="size-4" viewBox="0 0 16 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4083_2411)"><path d="M8.05662 7.64158C7.61541 7.69286 7.27891 8.05119 7.24761 8.50311C7.23413 8.69777 7.23834 8.71094 7.67974 9.84674C8.68384 12.4307 8.92712 13.0526 8.96801 13.1401C9.06716 13.3521 9.20652 13.5515 9.38071 13.7305C9.51431 13.8678 9.60246 13.9416 9.75147 14.0412C10.0135 14.2162 10.1434 14.2645 11.1629 14.5664C12.1559 14.8604 12.6984 15.0559 13.1658 15.2879C13.7715 15.5885 14.1941 15.9304 14.4613 16.3361C14.6531 16.6272 14.823 17.1492 14.8968 17.6746C14.9258 17.8801 14.9259 18.3341 14.8972 18.5198C14.8348 18.9228 14.7103 19.2606 14.5198 19.5432C14.4185 19.6935 14.4537 19.6683 14.601 19.4851C15.0179 18.9668 15.4426 18.081 15.6592 17.2776C15.9215 16.3054 15.9572 15.2614 15.7619 14.2733C15.3817 12.3491 14.1669 10.6885 12.4561 9.75414C12.3486 9.69538 11.9392 9.48074 11.3841 9.19218C11.2998 9.14839 11.185 9.08839 11.1288 9.05894C11.0727 9.02944 10.9578 8.96944 10.8736 8.92571C10.7893 8.88191 10.5469 8.7556 10.3348 8.64494L9.80726 8.36993C9.63515 8.28023 9.46311 8.1904 9.29114 8.10043C8.74106 7.81249 8.50823 7.69608 8.44186 7.67591C8.37227 7.6547 8.19543 7.62754 8.15108 7.63119C8.14168 7.63193 8.09924 7.63663 8.05662 7.64158Z" fill="url(#paint0_radial_4083_2411)"/><path d="M9.26242 17.2876C9.23193 17.3057 9.18919 17.3318 9.16735 17.3457C9.14545 17.3596 9.09702 17.3897 9.05954 17.4127C8.78713 17.5802 8.51489 17.748 8.24279 17.916C8.07623 18.0187 7.90984 18.1218 7.74362 18.2251C7.67013 18.2708 7.5964 18.3161 7.52242 18.361C7.49434 18.3778 7.3744 18.4517 7.25583 18.5252C7.10285 18.62 6.94971 18.7146 6.79642 18.8089C6.61855 18.9182 6.44082 19.0279 6.26323 19.1377C6.10836 19.2335 5.95335 19.3291 5.7982 19.4245C5.70145 19.4838 5.61214 19.5411 5.59964 19.5518C5.58108 19.5677 4.72098 20.1005 4.28941 20.3634C3.96158 20.5631 3.5824 20.6966 3.19426 20.7491C3.01358 20.7735 2.67158 20.7736 2.49139 20.7493C2.00273 20.6833 1.55267 20.5011 1.16712 20.2132C1.01595 20.1003 0.731228 19.8158 0.622424 19.6689C0.365908 19.3226 0.200011 18.9513 0.114094 18.531C0.0942999 18.4343 0.0756195 18.3526 0.0725267 18.3495C0.0644855 18.3414 0.0790216 18.4875 0.105187 18.6785C0.132403 18.8771 0.190362 19.1644 0.252836 19.4102C0.736176 21.3118 2.1116 22.8586 3.97345 23.5945C4.50962 23.8062 5.05067 23.9397 5.63935 24.0052C5.86055 24.0299 6.48671 24.0398 6.7175 24.0222C7.77628 23.9421 8.69811 23.6305 9.64376 23.0328C9.72801 22.9796 9.88624 22.8798 9.99541 22.8111C10.0977 22.7467 10.1998 22.6819 10.3017 22.6168C10.361 22.5788 10.4325 22.5339 10.4605 22.517C10.5025 22.4914 10.5441 22.4652 10.5853 22.4386C10.6259 22.4123 10.7994 22.3025 10.971 22.1946L11.6571 21.7612L11.8927 21.6124L11.9012 21.6071L11.9272 21.5907L11.9395 21.5829L12.1129 21.4734L12.7123 21.0947C13.4761 20.6148 13.7038 20.4463 14.0587 20.0987C14.2066 19.9539 14.4296 19.7066 14.4407 19.6752C14.443 19.6687 14.4826 19.6076 14.5288 19.5393C14.7165 19.2614 14.8417 18.921 14.9038 18.5196C14.9326 18.3339 14.9324 17.8799 14.9035 17.6745C14.8477 17.2774 14.7208 16.8269 14.5839 16.5401C14.3596 16.0698 13.8817 15.6425 13.1951 15.2983C13.0055 15.2032 12.8097 15.1163 12.7879 15.1174C12.7775 15.118 12.1386 15.5085 11.3681 15.9853C10.5975 16.4622 9.92879 16.876 9.88197 16.9051C9.83521 16.9341 9.7548 16.9832 9.70333 17.0142L9.26242 17.2876Z" fill="url(#paint1_radial_4083_2411)"/><path d="M0.059919 15.0002L0.0632592 18.3212L0.106249 18.514C0.240599 19.1169 0.473486 19.5517 0.878331 19.9554C1.06872 20.1453 1.21433 20.2598 1.42068 20.3819C1.85738 20.6403 2.3273 20.7678 2.842 20.7676C3.38113 20.7673 3.84753 20.6328 4.32808 20.3391C4.40918 20.2895 4.72699 20.0939 5.03423 19.9043L5.59291 19.5596V11.6792L5.59278 8.07471C5.59266 5.7751 5.58845 4.40939 5.58116 4.30226C5.53538 3.62896 5.25375 3.00997 4.78025 2.54178C4.63495 2.39809 4.51081 2.30209 4.14091 2.04756C3.95683 1.92087 3.6199 1.68885 3.39221 1.53193C2.87042 1.17228 2.34861 0.812667 1.82676 0.453102C1.4693 0.206607 1.44134 0.189535 1.33328 0.150875C1.19274 0.100586 1.0438 0.0820916 0.902208 0.0973699C0.489507 0.141906 0.159135 0.439927 0.0732798 0.845019C0.059919 0.908112 0.0574447 1.74687 0.0572592 6.29939L0.0570736 11.6793H0.0566406L0.059919 15.0002Z" fill="url(#paint2_linear_4083_2411)"/></g><defs><radialGradient id="paint0_radial_4083_2411" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.065 -888.082) rotate(-140.294) scale(1052.81 1453.04)"><stop stop-color="#00CACC"/><stop offset="1" stop-color="#048FCE"/></radialGradient><radialGradient id="paint1_radial_4083_2411" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(267.955 518.007) rotate(-35.5312) scale(1511.06 1184.47)"><stop stop-color="#00BBEC"/><stop offset="1" stop-color="#2756A9"/></radialGradient><linearGradient id="paint2_linear_4083_2411" x1="276.87" y1="0.0921631" x2="276.87" y2="2067.64" gradientUnits="userSpaceOnUse"><stop stop-color="#00BBEC"/><stop offset="1" stop-color="#2756A9"/></linearGradient><clipPath id="clip0_4083_2411"><rect width="15.8351" height="24" fill="white" transform="translate(0.0566406 0.0921631)"/></clipPath></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="search-brave" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="search-brave" name="search_engine" value="brave" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Brave Search
<svg width="22" height="25" class="size-4" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4083_2412)"><path d="M21.0584 7.83448L20.3169 5.83315L20.8272 4.68498C20.891 4.53348 20.8591 4.36604 20.7475 4.24644L19.3521 2.83514C18.7382 2.22119 17.8292 2.00591 17.0079 2.29295L16.6172 2.4285L14.4804 0.116205L10.8684 0.0922852H10.8445L7.20861 0.124179L5.07971 2.45242L4.69698 2.31687C3.86775 2.02185 2.9508 2.23714 2.33685 2.86704L0.917581 4.30225C0.8219 4.39793 0.797979 4.53348 0.84582 4.65308L1.38004 5.8491L0.646484 7.85043L1.12489 9.66039L3.29366 17.8969C3.54084 18.8458 4.11492 19.675 4.92024 20.2491C4.92024 20.2491 7.55147 22.1069 10.1428 23.7893C10.3741 23.9408 10.6133 24.0444 10.8684 24.0444C11.1236 24.0444 11.3628 23.9408 11.594 23.7893C14.5123 21.8757 16.8166 20.2411 16.8166 20.2411C17.6139 19.667 18.188 18.8378 18.4352 17.889L20.588 9.65242L21.0584 7.83448Z" fill="#F15A22"/><path style="mix-blend-mode:lighten" opacity="0.15" d="M3.39731 18.2478L0.646484 8.02582L1.4518 6.02449L0.89366 4.54144L2.22522 3.18596C2.66376 2.79526 3.52489 2.65971 3.92356 2.89094L6.00462 4.08695L8.71559 4.71685L10.8285 3.83978L11.004 21.9953C10.9721 24.6105 11.1395 24.3315 9.21791 23.0956L4.47373 19.9142C3.96343 19.4278 3.57273 18.8777 3.39731 18.2478Z" fill="url(#paint0_linear_4083_2412)"/><path style="mix-blend-mode:darken" opacity="0.4" d="M16.7709 20.2049L12.7364 22.9637C11.6121 23.5777 11.0699 24.1837 10.9822 23.8886C10.9105 23.6574 10.9663 22.9797 10.9424 21.9272L10.8945 4.17037C10.9025 3.99496 11.0221 3.69994 11.2294 3.73183L13.2866 4.35376L16.2527 3.8913L18.2141 2.44811C18.4214 2.28864 18.7244 2.30459 18.9158 2.48798L20.6699 4.1624C20.8294 4.32984 20.8374 4.65675 20.7417 4.86406L20.2553 5.76506L21.0606 7.84612L18.2859 18.1637C17.8553 19.4474 17.2493 19.7823 16.7709 20.2049Z" fill="url(#paint1_linear_4083_2412)"/><path d="M11.3347 14.8271C11.239 14.7873 11.1353 14.7554 11.1034 14.7554H10.9759H10.8483C10.8164 14.7554 10.7127 14.7873 10.617 14.8271L9.5805 15.2577C9.48482 15.2976 9.32535 15.3693 9.22967 15.4172L7.66688 16.2305C7.5712 16.2783 7.56323 16.366 7.65093 16.4298L9.03034 17.4025C9.11804 17.4663 9.25359 17.57 9.33333 17.6417L9.94728 18.168C10.027 18.2398 10.1546 18.3514 10.2343 18.4231L10.8244 18.9494C10.9041 19.0212 11.0317 19.0212 11.1114 18.9494L11.7174 18.4231C11.7971 18.3514 11.9247 18.2398 12.0044 18.168L12.6184 17.6338C12.6981 17.562 12.8337 17.4584 12.9214 17.3946L14.3008 16.4138C14.3885 16.3501 14.3805 16.2623 14.2848 16.2145L12.722 15.4172C12.6263 15.3693 12.4669 15.2976 12.3712 15.2577L11.3347 14.8271Z" fill="white"/><path d="M18.8188 8.18988C18.8507 8.08622 18.8507 8.04636 18.8507 8.04636C18.8507 7.9427 18.8427 7.76729 18.8268 7.66363L18.747 7.4324C18.6992 7.33672 18.6195 7.18523 18.5557 7.09752L17.6547 5.76596C17.5989 5.67825 17.4952 5.5427 17.4234 5.45499L16.2593 3.99586C16.1955 3.91612 16.1318 3.84436 16.1238 3.85234H16.1078C16.1078 3.85234 16.0201 3.86828 15.9165 3.88423L14.1384 4.23506C14.0347 4.25898 13.8673 4.29087 13.7636 4.30682L13.7318 4.3148C13.6281 4.33074 13.4607 4.32277 13.357 4.29087L11.866 3.81247C11.7623 3.78058 11.5949 3.73274 11.4992 3.70881C11.4992 3.70881 11.1962 3.63705 10.949 3.64503C10.7018 3.64503 10.3989 3.70881 10.3989 3.70881C10.2952 3.73274 10.1278 3.78058 10.0321 3.81247L8.54105 4.29087C8.4374 4.32277 8.26996 4.33074 8.1663 4.3148L8.13441 4.30682C8.03075 4.29087 7.86331 4.25101 7.75966 4.23506L5.96564 3.90018C5.86198 3.87626 5.77428 3.86828 5.77428 3.86828H5.75833C5.75035 3.86828 5.68657 3.93207 5.62278 4.0118L4.45866 5.47094C4.39487 5.55068 4.29122 5.6942 4.22743 5.78191L3.32643 7.11347C3.27062 7.20117 3.18291 7.35267 3.13507 7.44835L3.05534 7.67958C3.03939 7.78323 3.02344 7.95865 3.03142 8.0623C3.03142 8.0623 3.03142 8.0942 3.06331 8.20583C3.11913 8.39719 3.25467 8.5726 3.25467 8.5726C3.31846 8.65234 3.43806 8.78789 3.50982 8.85965L6.14903 11.6663C6.22079 11.746 6.24471 11.8895 6.20484 11.9852L5.65467 13.2849C5.61481 13.3806 5.60683 13.54 5.6467 13.6437L5.7982 14.0503C5.92577 14.3932 6.14105 14.6962 6.4281 14.9274L6.96231 15.358C7.04205 15.4218 7.18557 15.4457 7.28125 15.3979L8.97162 14.5925C9.0673 14.5447 9.21082 14.449 9.29055 14.3773L10.5025 13.2849C10.6779 13.1254 10.6859 12.8543 10.5264 12.6789L7.98291 10.9646C7.89521 10.9088 7.86331 10.7812 7.91115 10.6856L9.02743 8.58058C9.07527 8.4849 9.08325 8.3334 9.04338 8.23772L8.90783 7.92676C8.86796 7.83107 8.74836 7.71945 8.65268 7.67958L5.3756 6.45167C5.27992 6.41181 5.27992 6.37194 5.38358 6.36396L7.49653 6.16463C7.60019 6.15666 7.76763 6.1726 7.87128 6.19652L9.75301 6.72277C9.85667 6.75466 9.92045 6.85832 9.90451 6.96197L9.25069 10.542C9.23474 10.6457 9.23474 10.7892 9.25866 10.8689C9.28258 10.9487 9.38624 11.0204 9.48989 11.0444L10.7975 11.3234C10.9012 11.3474 11.0686 11.3474 11.1723 11.3234L12.3922 11.0444C12.4959 11.0204 12.5995 10.9407 12.6234 10.8689C12.6474 10.7972 12.6553 10.6457 12.6314 10.542L11.9856 6.96197C11.9696 6.85832 12.0334 6.74669 12.1371 6.72277L14.0188 6.19652C14.1224 6.16463 14.2899 6.15666 14.3935 6.16463L16.5065 6.36396C16.6102 6.37194 16.6181 6.41181 16.5145 6.45167L13.2374 7.69553C13.1417 7.73539 13.0221 7.83905 12.9822 7.9427L12.8467 8.25367C12.8068 8.34935 12.8068 8.50882 12.8626 8.59652L13.9869 10.7015C14.0347 10.7972 14.0028 10.9168 13.9151 10.9806L11.3716 12.7028C11.2042 12.8703 11.2201 13.1493 11.3955 13.3088L12.6075 14.4012C12.6872 14.4729 12.8308 14.5686 12.9264 14.6085L14.6248 15.4138C14.7205 15.4616 14.864 15.4377 14.9437 15.3739L15.4779 14.9354C15.765 14.7042 15.9803 14.4012 16.0999 14.0583L16.2514 13.6517C16.2912 13.556 16.2832 13.3886 16.2434 13.2929L15.6932 11.9932C15.6533 11.8975 15.6773 11.754 15.749 11.6743L18.3882 8.86762C18.46 8.78789 18.5716 8.66031 18.6434 8.58058C18.6274 8.55666 18.771 8.38124 18.8188 8.18988Z" fill="white"/></g><defs><linearGradient id="paint0_linear_4083_2412" x1="0.646484" y1="1064.58" x2="1037.4" y2="1064.58" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="0.1413" stop-color="white" stop-opacity="0.9576"/><stop offset="1" stop-color="white" stop-opacity="0.7"/></linearGradient><linearGradient id="paint1_linear_4083_2412" x1="10.4975" y1="1083.31" x2="1027.51" y2="1083.31" gradientUnits="userSpaceOnUse"><stop stop-color="#F1F1F2"/><stop offset="0.0919144" stop-color="#E4E5E6"/><stop offset="0.2357" stop-color="#D9DADB"/><stop offset="0.438" stop-color="#D2D4D5"/><stop offset="1" stop-color="#D0D2D3"/></linearGradient><clipPath id="clip0_4083_2412"><rect width="20.412" height="24" fill="white" transform="translate(0.646484 0.0921631)"/></clipPath></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="search-yahoo" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="search-yahoo" name="search_engine" value="yahoo" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Yahoo
<svg width="25" height="25" class="size-4" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.1939 1.42551H5.26055C3.49324 1.42551 2.06055 2.8582 2.06055 4.62551V19.5588C2.06055 21.3261 3.49324 22.7588 5.26055 22.7588H20.1939C21.9612 22.7588 23.3939 21.3261 23.3939 19.5588V4.62551C23.3939 2.8582 21.9612 1.42551 20.1939 1.42551Z" fill="#5F01D1"/><path d="M10.5183 18.2588H7.9349L8.97658 15.8005L6.10156 8.92551H8.72658L10.2682 12.8839L11.8099 8.92551H14.3932M16.8099 12.0922H13.9349L16.5183 5.92551H19.3932" fill="white"/><path d="M14.6849 15.8421C15.5593 15.8421 16.2682 15.1333 16.2682 14.2588C16.2682 13.3844 15.5593 12.6755 14.6849 12.6755C13.8105 12.6755 13.1016 13.3844 13.1016 14.2588C13.1016 15.1333 13.8105 15.8421 14.6849 15.8421Z" fill="white"/></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="search-other" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="search-other" name="search_engine" value="other" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Other
</label>
</div>
</div>
</fieldset>
</div>
<!-- AI Chatbot Details - Only visible when AI conversation is selected -->
<div class="hidden" data-conditional-radio-target="conditionalField" data-conditional-field="ai">
<fieldset>
<legend class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-3">Which AI chatbot?</legend>
<div class="flex gap-2 flex-wrap">
<div class="flex items-center gap-2">
<label for="ai-chatgpt" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="ai-chatgpt" name="ai_chatbot" value="chatgpt" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
ChatGPT
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="256" height="260" preserveAspectRatio="xMidYMid" viewBox="0 0 256 260"><path fill="currentColor" d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"/></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="ai-claude" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="ai-claude" name="ai_chatbot" value="claude" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Claude
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" width="1em"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"/></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="ai-gemini" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="ai-gemini" name="ai_chatbot" value="gemini" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Gemini
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" width="1em"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"/><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"/><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"/><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"/><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"/><stop offset="1" stop-color="#08B962" stop-opacity="0"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"/><stop offset="1" stop-color="#F94543" stop-opacity="0"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"/><stop offset=".46" stop-color="#FABC12" stop-opacity="0"/></linearGradient></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="ai-grok" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="ai-grok" name="ai_chatbot" value="grok" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Grok
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24" width="1em"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"/></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="ai-other" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="ai-other" name="ai_chatbot" value="other" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Other
</label>
</div>
</div>
</fieldset>
</div>
<!-- Social Media Details - Only visible when Social Media is selected -->
<div class="hidden" data-conditional-radio-target="conditionalField" data-conditional-field="social">
<fieldset>
<legend class="text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-3">Which social media platform?</legend>
<div class="flex gap-2 flex-wrap">
<div class="flex items-center gap-2">
<label for="social-facebook" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-facebook" name="social_platform" value="facebook" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Facebook
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 666.66668 666.66717"><defs id="defs13"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath25"><path d="M 0,700 H 700 V 0 H 0 Z" id="path23"/></clipPath></defs><g id="g17" transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)"><g id="g19"><g id="g21" clip-path="url(#clipPath25)"><g id="g27" transform="translate(600,350)"><path d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0" style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path29"/></g><g id="g31" transform="translate(447.9175,273.6036)"><path d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path33"/></g></g></g></g></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="social-instagram" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-instagram" name="social_platform" value="instagram" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Instagram
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 132.004 132"><defs><linearGradient id="b"><stop offset="0" stop-color="#3771c8"/><stop stop-color="#3771c8" offset=".128"/><stop offset="1" stop-color="#60f" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fd5"/><stop offset=".1" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></linearGradient><radialGradient id="c" cx="158.429" cy="578.088" r="65" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)" fx="158.429" fy="578.088"/><radialGradient id="d" cx="147.694" cy="473.455" r="65" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)" fx="147.694" fy="473.455"/></defs><path fill="url(#c)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/><path fill="url(#d)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/><path fill="#fff" d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z"/></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="social-twitter" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-twitter" name="social_platform" value="twitter" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Twitter/X
<svg width="24" height="25" class="size-3.5" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4083_2335)"><path d="M13.969 10.2493L22.7069 0.0921631H20.6363L13.0491 8.91147L6.9893 0.0921631H0L9.16366 13.4285L0 24.0798H2.07073L10.083 14.7664L16.4826 24.0798H23.4719L13.9684 10.2493H13.969ZM11.1328 13.546L10.2043 12.218L2.81684 1.65097H5.99736L11.9592 10.1789L12.8876 11.5069L20.6373 22.5919H17.4567L11.1328 13.5465V13.546Z" fill="currentColor"/></g><defs><clipPath id="clip0_4083_2335"><rect width="23.4719" height="24" fill="white" transform="translate(0 0.0921631)"/></clipPath></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="social-linkedin" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-linkedin" name="social_platform" value="linkedin" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
LinkedIn
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" height="72" viewBox="0 0 72 72" width="72"><g fill="none" fill-rule="evenodd"><path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z" fill="#007EBB"/><path d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z" fill="#FFF"/></g></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="social-tiktok" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-tiktok" name="social_platform" value="tiktok" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
TikTok
<svg width="25" height="25" class="size-4" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4083_2454)"><path d="M17.3408 8.75559C18.8739 9.86277 20.752 10.5142 22.7805 10.5142V6.57072C22.3966 6.5708 22.0137 6.53036 21.6381 6.44997V9.55406C19.6098 9.55406 17.7319 8.90261 16.1984 7.79552V15.843C16.1984 19.8688 12.968 23.1321 8.98337 23.1321C7.49661 23.1321 6.11473 22.678 4.9668 21.8992C6.27697 23.2526 8.10411 24.0922 10.1255 24.0922C14.1104 24.0922 17.3409 20.8289 17.3409 16.8029V8.75559H17.3408ZM18.75 4.77709C17.9665 3.91232 17.4521 2.79476 17.3408 1.55925V1.05204H16.2582C16.5307 2.62237 17.4601 3.96396 18.75 4.77709ZM7.48708 18.81C7.04932 18.2301 6.81276 17.5208 6.81382 16.7914C6.81382 14.9502 8.29137 13.4573 10.1143 13.4573C10.454 13.4572 10.7917 13.5097 11.1154 13.6135V9.5819C10.7371 9.52951 10.3552 9.50727 9.97354 9.51542V12.6534C9.64954 12.5497 9.31169 12.497 8.97188 12.4973C7.14898 12.4973 5.67151 13.99 5.67151 15.8315C5.67151 17.1336 6.41004 18.2608 7.48708 18.81Z" fill="#FF004F"/><path d="M16.1981 7.79543C17.7316 8.90253 19.6095 9.55397 21.6379 9.55397V6.44988C20.5057 6.20624 19.5033 5.6085 18.7497 4.77709C17.4598 3.96388 16.5304 2.62228 16.2579 1.05204H13.4143V16.8028C13.4078 18.639 11.9328 20.1258 10.1138 20.1258C9.04193 20.1258 8.08965 19.6096 7.48655 18.81C6.4096 18.2608 5.67107 17.1335 5.67107 15.8316C5.67107 13.9903 7.14854 12.4974 8.97144 12.4974C9.3207 12.4974 9.65733 12.5523 9.9731 12.6535V9.51551C6.05847 9.59721 2.91016 12.8286 2.91016 16.8029C2.91016 18.7868 3.69416 20.5852 4.9666 21.8993C6.11453 22.678 7.49641 23.1322 8.98317 23.1322C12.9679 23.1322 16.1982 19.8687 16.1982 15.843V7.79543H16.1981Z" fill="currentColor"/><path d="M21.6376 6.45V5.61068C20.6166 5.61224 19.6157 5.32338 18.7495 4.77712C19.5163 5.62526 20.526 6.21006 21.6376 6.45ZM16.2576 1.05215C16.2316 0.902079 16.2117 0.751018 16.1978 0.59938V0.0921631H12.2715V15.8431C12.2653 17.679 10.7903 19.1658 8.97117 19.1658C8.43709 19.1658 7.93284 19.0378 7.48628 18.8102C8.08938 19.6097 9.04165 20.1258 10.1136 20.1258C11.9324 20.1258 13.4076 18.6392 13.414 16.803V1.05215H16.2576ZM9.97299 9.51562V8.6221C9.64491 8.5768 9.31415 8.55407 8.98298 8.55423C4.99795 8.55415 1.76758 11.8176 1.76758 15.8431C1.76758 18.3668 3.03717 20.591 4.96641 21.8993C3.69397 20.5853 2.90997 18.7867 2.90997 16.8029C2.90997 12.8288 6.0582 9.59733 9.97299 9.51562Z" fill="#00F2EA"/></g><defs><clipPath id="clip0_4083_2454"><rect width="24" height="24" fill="white" transform="translate(0.273438 0.0921631)"/></clipPath></defs></svg>
</label>
</div>
<div class="flex items-center gap-2">
<label for="social-other" class="relative py-2 px-3 flex items-center gap-2 font-medium bg-white text-neutral-800 rounded-lg cursor-pointer ring-1 ring-neutral-200 has-[:checked]:ring-2 has-[:checked]:ring-neutral-400 dark:bg-neutral-700/50 dark:text-neutral-200 dark:ring-neutral-700 dark:has-[:checked]:ring-neutral-400 has-[:checked]:bg-neutral-100 has-[:checked]:text-neutral-900 dark:has-[:checked]:bg-neutral-600/60 dark:has-[:checked]:text-white">
<input type="radio" id="social-other" name="social_platform" value="other" class="text-neutral-600 focus:ring-neutral-500 dark:bg-neutral-700 dark:border-neutral-600">
Other
</label>
</div>
</div>
</fieldset>
</div>
<!-- Other Details - Only visible when Other is selected -->
<div class="hidden" data-conditional-radio-target="conditionalField" data-conditional-field="other">
<div>
<label for="other-source" class="block text-sm font-medium text-neutral-900 dark:text-neutral-100 mb-2">
Please specify where you heard about us:
</label>
<input
type="text"
id="other-source"
name="other_source"
placeholder="e.g., Podcast, Newsletter, Conference..."
class="form-control"
>
</div>
</div>
</div>
</div>import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="conditional-radio"
export default class extends Controller {
static targets = ["conditionalField"];
static values = {
fieldMap: Object, // Maps radio values to their corresponding conditional field targets
};
connect() {
this.updateVisibility();
}
// Called when a radio button changes
change(event) {
this.updateVisibility();
}
updateVisibility() {
const checkedRadio = this.element.querySelector('input[name="source"]:checked');
const selectedValue = checkedRadio ? checkedRadio.value : null;
// Hide all conditional fields first
this.conditionalFieldTargets.forEach((field) => {
field.classList.add("hidden");
});
// Show the relevant field if there's a selection
if (selectedValue && this.fieldMapValue[selectedValue]) {
const targetFieldName = this.fieldMapValue[selectedValue];
const targetField = this.conditionalFieldTargets.find(
(field) => field.dataset.conditionalField === targetFieldName
);
if (targetField) {
targetField.classList.remove("hidden");
}
}
}
}