Examples

[diegohaz]

This is a draft tracking issue for all examples on Ariakit ^{What is Ariakit?}. These will be used not only for development purposes but also to show the component and its usage in the documentation.

This list will be updated with new example ideas over time, but we should focus on getting the default examples done first.

If you want to contribute, you'll find detailed instructions on the contributing guide. If you're a member of the org, please edit this issue to add the PR and your username next to the example you're working on. If you're not a member, someone else can edit for you.

If you're not sure how an example should look or behave, just open a PR with what you have in mind and let's discuss it there.

Button

• Default Button example (@diegohaz)
• Button as a div (@saideepesh000 chore: Add button-as-div example #948)
• Button as a link (@AlexMunoz chore: Add button-as-link example #940)

Checkbox

• Default Checkbox example without useCheckboxState (@AlexMunoz chore: Add checkbox example #949)
• Checkbox styled using VisuallyHidden (@SCasarotto chore: Add checkbox-custom example  #1035)
• Controlled checkbox without useCheckboxState (@AlexMunoz chore: Add checkbox-controlled example #950)
• Checkbox with useCheckboxState (@SCasarotto chore: Add checkbox-state example #1036)
• Checkbox group (@navin-moorthy chore: Add checkbox-group example #1057)
• Checkbox as button with CheckboxCheck (@SCasarotto chore: Add checkbox-as-button example #1002)

Collection

• Default Collection example (@ciampo chore: Add collection example #977)
• Collection with shouldRegisterItem set to false (@renatorib Add collection-no-register-item example #3093)
• Collection with getItem (@renatorib Add collection-get-item example #3092)

Combobox

• Default Combobox example (@diegohaz)
• ComboboxArrow example
• ComboboxDisclosure example (@joaovitorzv chore: Add combobox-disclosure example #1524)
• ComboboxCancel example (@mitjapotocin chore: Add combobox-cancel example #1178)
• ComboboxGroup/ComboboxGroupLabel/ComboboxSeparator example (@diegohaz Fix Combobox with autoSelect + autoComplete="both" props #1219)
• ComboboxItemValue example (@cloud-walker Add example for combobox with highlighted matched text #1753)
• Combobox opening popover only after 1 character typed (@cloud-walker Add example for combobox opening popover only after 1 character typed #1740)
• Animated Combobox example (@joaovitorzv Add combobox-animated example #1608)
• Combobox matches (@diegohaz chore: Add combobox-matches example #953)
• Combobox with multiselectable items (@diegohaz chore: Add combobox-multiselect example #967)
• Combobox with autoComplete set to inline (@cloud-walker Add combobox inline autocomplete example #1752)
• Combobox with autoComplete set to both (@diegohaz Fix Combobox with autoSelect + autoComplete="both" props #1219)
• Combobox with autoSelect set to true
• Combobox with autoComplete set to both and autoSelect set to true

Command

• Default Command example (@SCasarotto chore: Add command example #1095)
• Command with clickOnEnter set to false (@SCasarotto chore: Add Command clickOnEnter false Example #1096)
• Command with clickOnSpace set to false (@SCasarotto chore: Add Command clickOnSpace false Example #1105)

Composite

• Default Composite example (@renatorib Add composite example #3094)

Dialog

• Default Dialog example (@saideepesh000 chore: Add dialog example #965)
• Non-modal Dialog (e.g., chat dialog)
• Nested Dialogs
• Animated Dialog example

Disclosure

• Default Disclosure example (@johnson444 chore: Add disclosure example #971 )
• Animated Disclosure example (@johnson444 chore: Add disclosure-animated example #981 )

FocusTrap

• Default FocusTrap example (@ItsJonQ chore: Add focus-trap example #988)

Focusable

• Default Focusable example

Form

• Default Form example (@diegohaz chore: Add form example #966)
• Form with array fields

Group

• Default Group example (@johnson444 chore: Add group example #969)

Heading

• Default Heading example (@saideepesh000 chore: Add heading example #946)

Hovercard

• Default Hovercard example (@leonardoelias chore: Add hovercard example #963)
• HovercardDisclosure example (@diegohaz feat: Improve Hovercard API and behavior #1044)

Menu

• Default Menu example (@diegohaz chore: Add menu example #1003)
• Default MenuBar example (@diegohaz)
• MenuGroup/MenuGroupLabel example
• MenuItemCheckbox example (@leonardoelias chore: Add menu-item-checkbox example  #961)
• MenuItemRadio example (@joaovitorzv Add menu-item-radio example #1543)
• Submenu example (@diegohaz)
• MenuItem with hideOnClick set to false
• MenuItem as link

Popover

• Default Popover example (@diegohaz)
• Responsive popover (@diegohaz chore: Add popover-responsive example #978)
• Popover with modal set to true
• Popover with portal set to true

Portal

• Default Portal example (@siva-kannan3 chore: Add portal example #1491)

Radio

• Default Radio example (@AlexMunoz chore: Add radio example #941)

Role

• Default Role example

Separator

• Default Separator example (@joaovitorzv chore: Add separator example #1460)

Tab

• Default Tab example (@diegohaz)
• Tab with React Router (@diegohaz chore: Add tab-react-router example #956)

Toolbar

• Default Toolbar example (@leonardoelias chore: Add toolbar example  #970, @diegohaz chore: Add toolbar example #1186)
• ToolbarContainer example
• ToolbarInput example

Tooltip

• Default Tooltip example (@saideepesh000 chore: Add tooltip example #951)
• Tooltip with timeout (@saideepesh000 chore: Add tooltip-with-timeout example #954)
• Tooltip with placement (@saideepesh000 chore: Add tooltip-placement example #960)

VisuallyHidden

• Default VisuallyHidden example (@cloud-walker Add visually-hidden example #1732)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.