Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,569
- Likes 764
![The following code:
const [value, setValue] = useState("");
<ComboboxProvider value={value} setValue={setValue}>
<SelectProvider defaultValue="Apple">
<Select />
<SelectPopover>
<Combobox />
<ComboboxList>
<ComboboxItem render={<SelectItem />} />
<ComboboxItem render={<SelectItem />} />
<ComboboxItem render={<SelectItem />} />
</ComboboxList>
</SelectPopover>
</SelectProvider>
</ComboboxProvider>](/pic/orig/media%2FF2JuxQoXEAAdVLY.jpg)
ALT The following code: const [value, setValue] = useState(""); <ComboboxProvider value={value} setValue={setValue}> <SelectProvider defaultValue="Apple"> <Select /> <SelectPopover> <Combobox /> <ComboboxList> <ComboboxItem render={<SelectItem />} /> <ComboboxItem render={<SelectItem />} /> <ComboboxItem render={<SelectItem />} /> </ComboboxList> </SelectPopover> </SelectProvider> </ComboboxProvider>
ALT A screenshot of a custom select widget labeled "Favorite fruit" with a default value of "Apple". The select popup has a combobox search field with a "Search" placeholder and a few options.
ALT Screenshot of a section of the Ariakit Checkbox page with the following content: API useCheckboxStore(); <Checkbox> <CheckboxCheck /> </Checkbox> Styling For more information on styling with Ariakit, refer to the Styling guide. Styling the checked state For consistency, the aria-checked attribute is always rendered on Checkbox, even when it's a native checkbox element. This means you can style the checked state using the aria-checked attribute selector:
ALT A screenshot of the ariakit.org site with a light theme
ALT A screenshot of the ariakit.org site with a dark theme
ALT A screenshot of Vercel's web analytics page for ariakit.org showing 10k visitors and 50k page views in the past 30 days. There's one person online. The top pages are home, components, getting started, and combobox. The top referrers are Google, Twitter, GitHub, and Hacker News.