forms
forms is an object within the theme property for overriding label, input, select, and dateTime picker styles.
Labels
label elements are used to describe form elements.
<Vizzly.Dashboard
// ...
theme={{
forms: {
label: {
color: "#374151",
fontWeight: 500,
},
},
}}
/>Inputs
input elements are used to collect information.
<Vizzly.Dashboard
// ...
theme={{
forms: {
input: {
border: "2px #dbdcdf solid",
borderRadius: "8px",
padding: "7.5px 1rem",
},
},
}}
/>Selects
select elements are used to show dropdowns.
<Vizzly.Dashboard
// ...
theme={{
forms: {
select: {
border: "2px #dbdcdf solid",
borderRadius: "8px",
padding: "7px 0 7px 1rem",
},
},
}}
/>Select...
To change the style of the chips, see the chips property.
DateTime Pickers
dateTime pickers are used to select dates and times.
<Vizzly.Dashboard
// ...
theme={{
forms: {
dateTime: {
date: {
width: "96px",
},
time: {
width: "48px",
},
calendar: {
selected: {
background: "#3074d9",
border: "0",
color: "#fff",
},
},
},
},
}}
/>Date Picker
Default Values
import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
export function Dashboard() {
const theme: VizzlyTheming.Base = {
forms: {
// Default Values
label: {
color: "#374151",
fontFamily: "inherit",
fontSize: "14px",
fontWeight: 500,
lineHeight: 1.15,
margin: "0 0 0.3rem 0",
},
input: {
background: "#fff",
border: "2px #dbdcdf solid",
borderRadius: "8px",
boxShadow: "unset",
color: "#374151",
fontSize: "14px",
fontWeight: 400,
padding: "7.5px 1rem",
"&:focus": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:focus:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
active: {
border: '2px #4b5462 solid',
},
},
select: {
background: "#fff",
border: "2px #dbdcdf solid",
borderRadius: "8px",
boxShadow: "unset",
color: "#374151",
fontSize: "14px",
fontWeight: 400,
padding: "7px 0 7px 1rem",
indicatorColor: "#374151",
"&:focus": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:focus:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
},
dateTime: {
input: {
// Applied to all 4 inputs (Start date, Time, End date, Time)
background: "#fff",
border: "2px #dbdcdf solid",
borderRadius: "8px",
boxShadow: "unset",
color: "#374151",
fontSize: "14px",
fontWeight: 400,
// Time inputs have 0 padding left/right by default
padding: "0.26rem 0.5rem",
"&:focus": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
"&:focus:hover": {
background: "#fff",
border: "2px #e0f2ff solid",
boxShadow: "unset",
},
},
date: {
width: "96px",
},
time: {
width: "48px",
},
calendar: {
title: {
color: "#374151",
fontFamily: "inherit",
fontSize: 16,
lineHeight: 1.15,
},
selected: {
background: "#3074d9",
border: "0",
color: "#fff",
},
unselected: {
background: "transparent",
color: "inherit",
border: "1px solid #c9d1d9",
"&:hover": {
background: "#e4e7e7",
border: "1px solid #e4e7e7",
color: "inherit",
},
},
arrows: {
background: "transparent",
border: "1px solid #e4e7e7",
borderRadius: "8px",
fill: "#374151",
"&:hover": {
background: "#e9ebf0",
border: "1px solid #c4c4c4",
},
},
},
// Arrow color between start and end date/time
indicatorColor: "#374151",
},
},
}
return (
<Vizzly.Dashboard
// ...
theme={theme}
/>
)
}