A button that can be clicked to trigger an event.

A checkbox is a widget that allows the user to toggle a boolean state.

This page contains all the input fields available in Solara.

Select comes in two flavours:

To support proper typechecks, we have multiple slider (all wrapping the ipyvuetify sliders).

A switch component provides users the ability to choose between two distinct values. But aesthetically different from a checkbox.

ToggleButtons are in two flavours, for single, and for multiple selections.

File/directory browser at the server side.

Region a user can drop a file into for file uploading.

Renders markdown text

WYSIWYG (visual) Markdown editor.

Render an HTML tag with optional raw HTML text inside.

Displays an image from a URL, Path, numpy data, bytes or PIL image.

SQL textfield input with auto complete and SQL syntax highlighting.

Download a file or data.

A tooltip that is shown when you hover above an element.

Solara has 4 types of alerts:

Solara has 4 types of alerts:

Solara has 4 types of alerts:

Solara has 4 types of alerts:

Spinner component with the Solara logo to indicate the app is busy.

Progress bar component showing a percentage, indeterminate or hidden.

Renders an Altair chart using VegaLite.

Create a Echarts figure.

Display a matplotlib figure.

You can use a regular plotly figure, for instance using plotly.express.

Instead of plotly.express' you can usesolara.express` instead.

The default layout for Solara apps. It consists of an toolbar bar, a sidebar and a main content area.

Puts its children in the app bar of the AppLayout (or any layout that supports it).

Puts its children in the title section of the AppBar (or any layout that supports it).

A card combines a title, subtitle, content and actions into a single unit.

Container for actions in a card.

Lays out children in columns, with relative widths specified as a list of floats or ints.

Lay our children in columns, on a 12 point grid system that is responsive to screen size.

Lays out children in a column on top of each other, with the given gap between them.

Lays out children in a row, side by side, with the given gap between them.

Child components are laid out on a grid, which can be dragged and resized.

Lays out children in a grid with a fixed number of columns.

Puts its children in the sidebar of the AppLayout (or any layout that supports it).

Lays out children in horizontal direction.

Lays out children in a vertical direction.

Displays a Pandas dataframe in a table.

Interactive Pivot Table showing aggregated data in groups.

A component that manager the "head" tag of the page to avoid duplicate tags, such as titles.

Set the title of a page.

Provides cross filtering, all other filters are combined using the reducer.

```python

```python

Creates a reactive variable with the a local component scope.

Returns a (value, setter) tuple that is used to manage state in a component.

Like solara.use_state, except it will update the value if the input value changes.

A route tells Solara which component to render for a given URL. (Not a Solara component!)

Returns (if found) the current route that matches the pathname, or None

Returns the current router object.

Resolve a relative path or a route to an absolute path.

Generate routes from a module.

Generate routes for a directory.

Makes clicking on child elements navigate to a route.

Display a Python object in the current component.

Will cache function return values based on the arguments.

Creates a new Reactive object with the given initial value.

Create a classic ipywidget from a component.

Decorator to create a component backed by a Vue template.

Add a custom piece of CSS.

Add a meta tag to the head element, or replace a meta tag with the same name and or property.

Display a DataFrame with filters applied from the cross filter.

Shows a report of the current cross filter state.

A Slider widget that will cross filter a DataFrame.

A Select widget that will cross filter a DataFrame.

Display an avatar with the user's picture or a default icon.

Show a menu with the user's avatar and a list of items.

An item in a Tabs component.

A tabbed container showing one tab at a time.