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 #948)
• Button as a link (@AlexMunoz #940)

Checkbox

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

Collection

• Default Collection example (@ciampo #977)
• Collection with shouldRegisterItem set to false (@renatorib #3093)
• Collection with getItem (@renatorib #3092)

Combobox

• Default Combobox example (@diegohaz)
• ComboboxArrow example
• ComboboxDisclosure example (@joaovitorzv #1524)
• ComboboxCancel example (@mitjapotocin #1178)
• ComboboxGroup/ComboboxGroupLabel/ComboboxSeparator example (@diegohaz #1219)
• ComboboxItemValue example (@cloud-walker #1753)
• Combobox opening popover only after 1 character typed (@cloud-walker #1740)
• Animated Combobox example (@joaovitorzv #1608)
• Combobox matches (@diegohaz #953)
• Combobox with multiselectable items (@diegohaz #967)
• Combobox with autoComplete set to inline (@cloud-walker #1752)
• Combobox with autoComplete set to both (@diegohaz #1219)
• Combobox with autoSelect set to true
• Combobox with autoComplete set to both and autoSelect set to true

Command

• Default Command example (@SCasarotto #1095)
• Command with clickOnEnter set to false (@SCasarotto #1096)
• Command with clickOnSpace set to false (@SCasarotto #1105)

Composite

• Default Composite example (@renatorib #3094)

Dialog

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

Disclosure

• Default Disclosure example (@johnson444 #971 )
• Animated Disclosure example (@johnson444 #981 )

FocusTrap

• Default FocusTrap example (@ItsJonQ #988)

Focusable

• Default Focusable example

Form

• Default Form example (@diegohaz #966)
• Form with array fields

Group

• Default Group example (@johnson444 #969)

Heading

• Default Heading example (@saideepesh000 #946)

Hovercard

• Default Hovercard example (@leonardoelias #963)
• HovercardDisclosure example (@diegohaz #1044)

Menu

• Default Menu example (@diegohaz #1003)
• Default MenuBar example (@diegohaz)
• MenuGroup/MenuGroupLabel example
• MenuItemCheckbox example (@leonardoelias #961)
• MenuItemRadio example (@joaovitorzv #1543)
• Submenu example (@diegohaz)
• MenuItem with hideOnClick set to false
• MenuItem as link

Popover

• Default Popover example (@diegohaz)
• Responsive popover (@diegohaz #978)
• Popover with modal set to true
• Popover with portal set to true

Portal

• Default Portal example (@siva-kannan3 #1491)

Radio

• Default Radio example (@AlexMunoz #941)

Role

• Default Role example

Separator

• Default Separator example (@joaovitorzv #1460)

Tab

• Default Tab example (@diegohaz)
• Tab with React Router (@diegohaz #956)

Toolbar

• Default Toolbar example (@leonardoelias #970, @diegohaz #1186)
• ToolbarContainer example
• ToolbarInput example

Tooltip

• Default Tooltip example (@saideepesh000 #951)
• Tooltip with timeout (@saideepesh000 #954)
• Tooltip with placement (@saideepesh000 #960)

VisuallyHidden

• Default VisuallyHidden example (@cloud-walker #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.