# 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_`. |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feathery.io/develop/context-api/field.setstyles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.