> Markdown version of [Styling](https://vaadin.com/docs/v24/components/form-layout/styling). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Styling

## <a id="lumo-properties"></a>Lumo Properties

The following Lumo style properties can be used to easily change the styling of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

| Feature                              | Property                              | Default Value    |
| ------------------------------------ | ------------------------------------- | ---------------- |
| Spacing between columns              | `--vaadin-form-layout-column-spacing` | `--lumo-space-l` |
| Spacing between rows                 | `--vaadin-form-layout-row-spacing`    | `0`              |
| Spacing between side label and field | `--vaadin-form-layout-label-spacing`  | `1em`            |
| Side label width                     | `--vaadin-form-layout-label-width`    | `8em`            |

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/v24/styling.md) for more details on how to style components.

- Form Layout

  `vaadin-form-layout`

- Form Row

  `vaadin-form-row`

- Form Item

  `vaadin-form-item`

- Form Item Label

  `vaadin-form-item::part(label)`

- Form Item Label Text

  `vaadin-form-item > label`

- Form Item Required Indicator

  `vaadin-form-item::part(required-indicator)`

- Form Item with Required Field

  `vaadin-form-item[required]`