Radix UI Select as Form Input

Can i?

31 Replies

juliusOP•3y ago

<select name={zo.fields.language()}>
  {languages.map((item) => (
    <option key={item.key} value={item.key}>
      {item.title}
     </option>
   ))}
 </select>

<select name={zo.fields.language()}>
  {languages.map((item) => (
    <option key={item.key} value={item.key}>
      {item.title}
     </option>
   ))}
 </select>

but nice looking - using radix everywhere else but not sure where the select, option or input should go when converting to radix this is it now but doesn't use the actual form inputs

  const SelectLanguage = (
    <Select.Root>
      <Select.Trigger className="h-10 bg-white text-gray-700 rounded border border-gray-200 w-64 flex justify-between items-center py-1 px-3 gap-3 cursor-pointer text-sm">
        <Select.Value />
        <Select.Icon asChild>
          <TiArrowSortedDown className="w-4 text-gray-700" />
        </Select.Icon>
      </Select.Trigger>

      <Select.Portal>
        <Select.Content className="overflow-hidden bg-white rounded text-gray-700 mt-2">
          <Select.Viewport className="p-2">
            {languages.map((item) => (
              <Select.Item key={item.key} value={item.key} asChild>
                <Select.ItemText className="flex gap-2 h-10 w-64 py-1 px-3 justify-between space-x-3 cursor-pointer items-center text-sm">
                  <item.icon className="h-5 w-5" /> {item.key}
                </Select.ItemText>
                <Select.ItemIndicator className="SelectItemIndicator">
                  <HiCheckCircle className="h-5 w-5 text-primary" />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );

  const SelectLanguage = (
    <Select.Root>
      <Select.Trigger className="h-10 bg-white text-gray-700 rounded border border-gray-200 w-64 flex justify-between items-center py-1 px-3 gap-3 cursor-pointer text-sm">
        <Select.Value />
        <Select.Icon asChild>
          <TiArrowSortedDown className="w-4 text-gray-700" />
        </Select.Icon>
      </Select.Trigger>

      <Select.Portal>
        <Select.Content className="overflow-hidden bg-white rounded text-gray-700 mt-2">
          <Select.Viewport className="p-2">
            {languages.map((item) => (
              <Select.Item key={item.key} value={item.key} asChild>
                <Select.ItemText className="flex gap-2 h-10 w-64 py-1 px-3 justify-between space-x-3 cursor-pointer items-center text-sm">
                  <item.icon className="h-5 w-5" /> {item.key}
                </Select.ItemText>
                <Select.ItemIndicator className="SelectItemIndicator">
                  <HiCheckCircle className="h-5 w-5 text-primary" />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );

Matvey•3y ago

I believe you can set defaultValue and name on Select.Root and it will work in as a form input.

juliusOP•3y ago

hmm doesn't seem to select it

juliusOP•3y ago

juliusOP•3y ago

defaultValue samee same

benten•3y ago

nvm If you add onValueChange((m) => console.log(m)) to root does it correctly log the values?

juliusOP•3y ago

yes, but the value isn't added to the form data

juliusOP•3y ago

benten•3y ago

what form?

juliusOP•3y ago

juliusOP•3y ago

the lang field in the form doesn't change with the select

benten•3y ago

you need to manually set the form field, I don't think radix does this automatically i don't really see how it could use the onChange callback

juliusOP•3y ago

is it not a native select? im using react-zorm

<select name={zo.fields.language()}>
  {languages.map((item) => (
    <option key={item.key} value={item.key}>
      {item.title}
     </option>
   ))}
 </select>

<select name={zo.fields.language()}>
  {languages.map((item) => (
    <option key={item.key} value={item.key}>
      {item.title}
     </option>
   ))}
 </select>

this worked

benten•3y ago

It's not a native select It uses aria-attributes to give it the role of a dropdown but it's basically a div element, which lets you style it however you want so you have to hook up the value of the select to the form

juliusOP•3y ago

hmm fck i dont know if i can set the value manually in react-zorm, it kinda relies on the web api

benten•3y ago

yeah not sure, never used it

juliusOP•3y ago

alright thanks anyways

benten•3y ago

worst case, add a hidden select and set that to the dropdown value

juliusOP•3y ago

where would i put the select or just a bunch of radios?

benten•3y ago

Put the select in the form somewhere but hide it like a native select with the options you need and then use the radix select onChange to set the value of the hidden select box

const hiddenSelect = useRef<HTMLSelectElement()
return (
  <form>
    <select className='hidden'>
       {/*...*/}
    </select>
    <Select.Root onChange={(value) => hiddenSelect.current.value=value}>

const hiddenSelect = useRef<HTMLSelectElement()
return (
  <form>
    <select className='hidden'>
       {/*...*/}
    </select>
    <Select.Root onChange={(value) => hiddenSelect.current.value=value}>