Comment on page
field.setStyles()
The API for setting field styles
Styles can be dynamically set on a field in your form via the Context API. Note that field styles that are set this way will only last for the current user session.
The following are
Style Attribute | Type | Description |
|---|---|---|
width | number | Width of the field |
width_unit | px | % | The unit of the width value |
height | number | Height of the field |
height_unit | px | % | The unit of the height value |
font_color | hex string | Font color of field |
font_italic | boolean | Is field font italicized |
font_weight | number | Font weight of field |
font_size | number | Font size of field |
font_family | string | Font family of field |
font_strike | boolean | Is font strike-through |
font_underline | boolean | Is font underlined |
line_height | number | The font line height |
letter_spacing | number | The font letter spacing |
visibility | visibility CSS options | CSS visibility style |
horizontal_align | flex-start, center, flex-end | Horizontal field alignment |
vertical_align | flex-start, center, flex-end | Vertical field alignment |
shadow_x_offset | number | Horizontal offset (in pixels) of the field shadow |
shadow_y_offset | number | Vertical offset (in pixels) of the field shadow |
shadow_blur_radius | number | Blur radius (in pixels) of the field shadow |
shadow_color | hex string | Field shadow color |
background_color | hex string | Field background color |
hover_background_color | hex string | Field background color when hovered |
selected_background_color | hex string | Field background color when selected or active |
disabled_background_color | hex string | Background color when field is disabled |
hover_font_color | hex string | Font color when hovered |
selected_font_color | hex string | Font color when selected or active |
disabled_font_color | hex string | Font color when field is disabled |
padding_bottom | number | Bottom padding of the field |
padding_top | number | Top padding of the field |
padding_left | number | Left padding of the field |
padding_right | number | Right padding of the field |
corner_top_left_radius | number | Top left border radius |
corner_top_right_radius | number | Top right border radius |
corner_bottom_left_radius | number | Bottom left border radius |
corner_bottom_right_radius | number | Bottom right border radius |
border_top_color | hex string | Top border color |
border_right_color | hex string | Right border color |
border_bottom_color | hex string | Bottom border color |
border_left_color | hex string | Left border color |
border_top_width | number | Top border width in pixels |
border_right_width | number | Right border width in pixels |
border_bottom_width | number | Bottom border width in pixels |
border_left_width | number | Left border width in pixels |
border_top_pattern | string | |
border_right_pattern | string | |
border_bottom_pattern | string | |
border_left_pattern | string | |
Other border styles | | For hover styles, prefix the style with hover_. For selected / active styles, prefix with selected_. |
Last modified 1mo ago