# field.setStyles()

Styles can be [dynamically set](https://docs.feathery.io/develop/context-api/field-object) 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`              | The CSS top [border style ](https://www.w3schools.com/css/css_border.asp)                                |
|    `border_right_pattern`    |              `string`              | The CSS right [border style ](https://www.w3schools.com/css/css_border.asp)                              |
|    `border_bottom_pattern`   |              `string`              | The CSS bottom [border style ](https://www.w3schools.com/css/css_border.asp)                             |
|     `border_left_pattern`    |              `string`              | The CSS left [border style ](https://www.w3schools.com/css/css_border.asp)                               |
|      Other border styles     |                                    | For hover styles, prefix the style with `hover_`. For selected / active styles, prefix with `selected_`. |