Ariakit
/

Form with Select

Combining Form and Select to create an accessible custom select widget that works with the browser's built-in validation and native form submission.

import {
Form,
FormSelect,
} from "./form.tsx";
import { SelectItem } from "./select.tsx";
import "./style.css";
export default function Example() {
const form = useFormStore({ defaultValues: { name: "", fruit: "" } });
const $ = form.names;
form.useSubmit(() => {
alert(JSON.stringify(form.getState().values));
});
return (
<Form store={form}>
<FormField name={$.name} label="Name">
<FormInput name={$.name} required placeholder="John Doe" />
<FormField name={$.fruit} label="Favorite fruit">
<FormSelect name={$.fruit} required>
<SelectItem value="">Select an item</SelectItem>
<SelectItem value="Apple" />
<SelectItem value="Banana" />
<SelectItem value="Orange" />
</FormSelect>
<div className="buttons">
</div>
</Form>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue