Radio Button 2

• Vista previa

  Radio 1

  Lorem ipsum dolor sit amet consectetur adipisicing elit.

  Radio 2

  Lorem ipsum dolor sit amet consectetur adipisicing elit.

  Radio 3

  Lorem ipsum dolor sit amet consectetur adipisicing elit.

• Código

  const Radio2 = () => {
    return (
      <div className="space-y-4 sm:space-y-0 sm:flex sm:items-center sm:gap-4">
        <label htmlFor="radio21" className="block relative">
          <input id="radio21" type="radio" defaultChecked name="payment" className="sr-only peer" />
          <div className="w-full p-5 cursor-pointer rounded-lg border border-border ring-blue-500 peer-checked:ring-2">
            <div className="pl-7">
              <h3 className="leading-none font-bold">Radio 1</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <span className="block absolute top-5 left-5 border peer-checked:border-[5px] peer-checked:border-blue-500 w-4 h-4 rounded-full"></span>
        </label>
        <label htmlFor="radio22" className="block relative">
          <input id="radio22" type="radio" name="payment" className="sr-only peer" />
          <div className="w-full p-5 cursor-pointer rounded-lg border border-border ring-blue-500 peer-checked:ring-2">
            <div className="pl-7">
              <h3 className="leading-none font-bold">Radio 2</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <span className="block absolute top-5 left-5 border peer-checked:border-[5px] peer-checked:border-blue-500 w-4 h-4 rounded-full"></span>
        </label>
        <label htmlFor="radio23" className="block relative">
          <input id="radio23" type="radio" name="payment" className="sr-only peer" />
          <div className="w-full p-5 cursor-pointer rounded-lg border border-border ring-blue-500 peer-checked:ring-2">
            <div className="pl-7">
              <h3 className="leading-none font-bold">Radio 3</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </p>
            </div>
          </div>
          <span className="block absolute top-5 left-5 border peer-checked:border-[5px] peer-checked:border-blue-500 w-4 h-4 rounded-full"></span>
        </label>
      </div>
    );
  };
  
  export default Radio2;