RadioCard

import { RadioCard, RadioGroup } from "@nexera-ui/react";
import { LuBuilding2, LuHouse, LuUsers } from "react-icons/lu";

export function InGroup() {
  return (
    <RadioGroup label="Where do you work" type="card" defaultValue="office" name="location">
      <RadioCard
        value="office"
        icon={<LuBuilding2 />}
        title="Office"
        meta="Most chosen"
        description="Lahore HQ, 5 days a week"
      />
      <RadioCard
        value="hybrid"
        icon={<LuUsers />}
        title="Hybrid"
        description="2 days in the office"
      />
      <RadioCard
        value="remote"
        icon={<LuHouse />}
        title="Remote"
        description="Not available for your role"
        isDisabled
      />
    </RadioGroup>
  );
}

import { RadioCard, RadioGroup } from "@nexera-ui/react";
import { LuBuilding2, LuHouse } from "react-icons/lu";

export function Invalid() {
  return (
    <RadioGroup
      label="Where do you work"
      type="card"
      isInvalid
      errorMessage="Choose where you work."
    >
      <RadioCard value="office" icon={<LuBuilding2 />} title="Office" description="Lahore HQ" />
      <RadioCard value="remote" icon={<LuHouse />} title="Remote" description="From home" />
    </RadioGroup>
  );
}

import { RadioCard, RadioGroup } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

export function LongText() {
  return (
    <RadioGroup aria-label="Where do you work" type="card">
      <RadioCard
        value="office"
        icon={<LuBuilding2 />}
        title="Office in the city centre with parking"
        meta="Most chosen this quarter"
        description="Lahore HQ, five days a week, with a shuttle from the metro station"
      />
    </RadioGroup>
  );
}

import { RadioCard, RadioGroup } from "@nexera-ui/react";
import { LuBuilding2, LuHouse } from "react-icons/lu";

export function RightToLeft() {
  return (
    <RadioGroup aria-label="مكان العمل" type="card" defaultValue="office">
      <RadioCard
        value="office"
        icon={<LuBuilding2 />}
        title="المكتب"
        meta="الأكثر اختيارًا"
        description="المقر الرئيسي في لاهور"
      />
      <RadioCard value="remote" icon={<LuHouse />} title="عن بُعد" description="من المنزل" />
    </RadioGroup>
  );
}