@shadcn/ui custom remote

formfield.tsx

<FormField
  control={form.control}
  name="type"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Work from...</FormLabel>
      <FormControl>
        <RadioGroup onValueChange={field.onChange} defaultValue={field.value} className="flex flex-wrap">
          <FormItem className="flex space-x-1 space-y-1">
            <FormControl>
              <RadioGroupItem value="remote" className="peer hidden" />
            </FormControl>
            <FormLabel className="block cursor-pointer rounded-md border border-border p-4 font-normal shadow-sm hover:border-primary peer-aria-checked:border-primary peer-aria-checked:ring-1 peer-aria-checked:ring-ring">
              <CheckCircle className="mr-2 hidden h-4 w-4 peer-aria-checked:inline" />
              🏖️ Remote
            </FormLabel>
          </FormItem>
          <FormItem className="flex space-x-1 space-y-1">
            <FormControl>
              <RadioGroupItem value="hybrid" className="peer hidden" />
            </FormControl>
            <FormLabel className="block cursor-pointer rounded-md border border-border p-4 font-normal shadow-sm hover:border-primary peer-aria-checked:border-primary peer-aria-checked:ring-1 peer-aria-checked:ring-ring">
              <CheckCircle className="mr-2 hidden h-4 w-4 peer-aria-checked:inline" />
              🤏 Hybrid
            </FormLabel>
          </FormItem>
          <FormItem className="flex space-x-1 space-y-1">
            <FormControl>
              <RadioGroupItem value="on-site" className="peer hidden" />
            </FormControl>
            <FormLabel className="block cursor-pointer rounded-md border border-border p-4 font-normal shadow-sm hover:border-primary peer-aria-checked:border-primary peer-aria-checked:ring-1 peer-aria-checked:ring-ring">
              <CheckCircle className="mr-2 hidden h-4 w-4 peer-aria-checked:inline" />
              🏢 On-Site
            </FormLabel>
          </FormItem>
        </RadioGroup>
      </FormControl>
      <FormDescription>Office, remote, or a little bit of both?</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>