Component Reference

System Widget Library

Component	Name	Description
oh-button	Button	Button performing an action
oh-chart	Chart	Visualize series of data
oh-colorpicker	Colorpicker	Control to pick a color
oh-gauge	Gauge	Circular or semi-circular read-only gauge
oh-icon	Icon	Display an openHAB icon
oh-image	Image	Displays an image from a URL or an item
oh-input	Input	Displays an input field, used to set a variable
oh-knob	Knob	Knob control, allow to change a number value on a circular track
oh-link	Link	Link performing an action
oh-list	List	List control, hosts list items
oh-player	Media player	Media player controls, with previous track/pause/play/next buttons
oh-repeater	Repeater	Iterate over an array and repeat the children components in the default slot
oh-rollershutter	Rollershutter	Rollershutter control, with up/down/stop buttons
oh-slider	Slider	Slider control, allows to pick a number value on a scale
oh-stepper	Stepper	Stepper control, allows to input a number or decrement/increment it using buttons
oh-swiper	Swiper	Swiper control, allows to display multiple swipeable slides
oh-toggle	Toggle	Toggle control, allows to switch on or off
oh-trend	Trend line	Trend line to display the overall recent evoluation of an item
oh-video	Video	Displays a video player from a URL or an item
oh-webframe	Web frame	Displays a web page in a frame

Standard Widget Library (Standalone Cards)

Component	Name	Description
oh-clock-card	Digital Clock Card	Display a digital clock in a card
oh-colorpicker-card	Color Picker Card	Display a color picker in a card
oh-gauge-card	Gauge Card	Display a read-only gauge in a card to visualize a quantifiable item
oh-image-card	Image Card	Display an image (URL or Image item ) in a card
oh-input-card	Input Card	Display an input in a card
oh-knob-card	Knob Card	Display a knob in a card to visualize and control a quantifiable item
oh-label-card	Label Card	Display the state of an item in a card
oh-list-card	List Card	Display a list in a card
oh-player-card	Player Card	Display player controls in a card
oh-rollershutter-card	Rollershutter Card	Display rollershutter controls in a card
oh-slider-card	Slider Card	Display a slider in a card to control an item
oh-stepper-card	Stepper Card	Display a stepper in a card to control an item
oh-swiper-card	Swiper Card	Display a swiper allowing to browse slides, in a card
oh-toggle-card	Toggle Card	Display a toggle swtich in a card to send ON/OFF commands
oh-video-card	Video Card	Display a video (URL or URL from String item) in a card
oh-webframe-card	Web Frame Card	Display a web page in a card

Standard Widget Library (List Items)

Component	Name	Description
oh-colorpicker-item	Color Picker List Item	Display a color picker in a list
oh-input-item	Input List Item	Display an input field in a list
oh-label-item	Label List Item	Display the state of an item in a list
oh-list-item	List Item	A list item
oh-player-item	Player List Item	Display player controls in a list
oh-rollershutter-item	Rollershutter List Item	Display rollershutter controls in a list
oh-slider-item	Slider List Item	Display a slider control in a list
oh-stepper-item	Stepper List Item	Display a stepper control in a list
oh-toggle-item	Toggle List Item	Display a toggle switch in a list

Standard Widget Library (Cells)

Component	Name	Description
oh-cell	Cell	A regular or expandable cell
oh-colorpicker-cell	Colorpicker Cell	A cell expanding to a color picker
oh-knob-cell	Knob Cell	A cell expanding to a knob control
oh-label-cell	Label Cell	A cell with a big label to show a short item state value
oh-rollershutter-cell	Rollershutter Cell	A cell expanding to rollershutter controls
oh-slider-cell	Slider Cell	A cell expanding to a big vertical slider

Layout Components

Component	Name	Description
oh-block	Layout Grid Block	A block in a grid layout
oh-grid-col	Layout Grid Column	A column in a grid layout
oh-grid-row	Layout Grid Row	A row in a grid layout
oh-masonry	Masonry Layout	Arranges widgets automatically depending on the screen size

Map Page & Markers

Component	Name	Description
oh-map-circle-marker	Circle Marker	A circle on a map, to represent a radius
oh-map-marker	Map Marker	An icon on a map
oh-map-page	Map page	Displays markers on a map

Floorplan Page & Markers

Component	Name	Description
oh-plan-marker	Floor Plan Marker	A marker on a floor plan
oh-plan-page	Floor plan	Displays markers on an image overlay

Chart Page & Components

Component	Name	Description
oh-chart-page	Chart Page	Visualize historical series
oh-chart-grid	Cartesian Grid
oh-category-axis	Category Axis
oh-value-axis	Value Axis
oh-time-axis	Time Axis
oh-calendar-axis	Calendar
oh-data-series	Data Series
oh-time-series	Time Series
oh-aggregate-series	Aggregate Series
oh-calendar-series	Calendar Series
oh-chart-tooltip	Tooltip
oh-chart-visualmap	Visual Map
oh-chart-datazoom	Data Zoom
oh-chart-legend	Legend
oh-chart-title	Title
oh-chart-toolbox	Toolbox

Home Page Cards

Component	Name	Description
oh-location-card	Location Card	A card showing model items in a certain location
oh-equipment-card	Equipment Class Card	A card showing model items belonging to a certain equipment class
oh-property-card	Property Card	A card showing model items related to a certain property

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub (opens new window)