devsnips
Search docs, APIs, guides…

Component

Radio Styled Input

Styled radio button components with card and button group styles

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/radio-styled/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/radio-styled
registry path: Tailwind/Components/Input/radio-styled

Source

Implementation

code.html 
<!-- Radio - Default -->
<div class="space-y-3">
  <p class="text-sm font-medium text-gray-700">Select a plan</p>
  <div class="space-y-2">
    <label class="flex items-center gap-3 cursor-pointer">
      <input type="radio" name="plan" class="w-5 h-5 border-gray-300 text-blue-600 focus:ring-blue-500" />
      <span class="text-sm text-gray-700">Free plan</span>
    </label>
    <label class="flex items-center gap-3 cursor-pointer">
      <input type="radio" name="plan" checked class="w-5 h-5 border-gray-300 text-blue-600 focus:ring-blue-500" />
      <span class="text-sm text-gray-700">Pro plan - $9/month</span>
    </label>
    <label class="flex items-center gap-3 cursor-pointer">
      <input type="radio" name="plan" class="w-5 h-5 border-gray-300 text-blue-600 focus:ring-blue-500" />
      <span class="text-sm text-gray-700">Enterprise - Contact us</span>
    </label>
  </div>
</div>

<!-- Radio - Card Style -->
<div class="mt-6 space-y-3">
  <p class="text-sm font-medium text-gray-700">Choose delivery method</p>
  <div class="grid grid-cols-2 gap-3">
    <label class="relative p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 transition-colors">
      <input type="radio" name="delivery" class="sr-only" />
      <div class="text-center">
        <svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
        </svg>
        <p class="text-sm font-medium text-gray-700">Standard</p>
        <p class="text-xs text-gray-500">3-5 days</p>
      </div>
      <div class="absolute top-2 right-2 w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 hidden"></div>
      </div>
    </label>
    <label class="relative p-4 border-2 border-blue-500 bg-blue-50 rounded-xl cursor-pointer transition-colors">
      <input type="radio" name="delivery" checked class="sr-only" />
      <div class="text-center">
        <svg class="w-8 h-8 mx-auto text-blue-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
        <p class="text-sm font-medium text-blue-700">Express</p>
        <p class="text-xs text-blue-600">1-2 days</p>
      </div>
      <div class="absolute top-2 right-2 w-5 h-5 rounded-full border-2 border-blue-500 flex items-center justify-center">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
      </div>
    </label>
  </div>
</div>

<!-- Radio - Button Group -->
<div class="mt-6">
  <p class="text-sm font-medium text-gray-700 mb-3">File format</p>
  <div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
    <label class="px-4 py-2.5 bg-gray-100 text-sm font-medium text-gray-700 cursor-pointer has-[:checked]:bg-blue-600 has-[:checked]:text-white transition-colors">
      <input type="radio" name="format" class="sr-only" checked />
      PNG
    </label>
    <label class="px-4 py-2.5 bg-white text-sm font-medium text-gray-700 cursor-pointer has-[:checked]:bg-blue-600 has-[:checked]:text-white border-l border-gray-300 transition-colors">
      <input type="radio" name="format" class="sr-only" />
      JPG
    </label>
    <label class="px-4 py-2.5 bg-white text-sm font-medium text-gray-700 cursor-pointer has-[:checked]:bg-blue-600 has-[:checked]:text-white border-l border-gray-300 transition-colors">
      <input type="radio" name="format" class="sr-only" />
      SVG
    </label>
    <label class="px-4 py-2.5 bg-white text-sm font-medium text-gray-700 cursor-pointer has-[:checked]:bg-blue-600 has-[:checked]:text-white border-l border-gray-300 transition-colors">
      <input type="radio" name="format" class="sr-only" />
      PDF
    </label>
  </div>
</div>
74 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/radio-styled
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/radio-styled/

Install: npx devsnips add
Tailwind/Components/Input/radio-styled

This is the Radio Styled Input — Styled radio button components with card and button group styles

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/radio-styled