---
title: "Properties"
description: "Declaring properties on elements."
---
import SC from '@slint/common-files/src/components/SC.astro';
import OnlyInSC from '@slint/common-files/src/components/OnlyInSC.astro';

<SC>
An element has a set of named *properties*, determined by the type of the element:
the element's type provides properties — including those of the base it
[inherits](/reference/language/file-structure/#sls.file.component.inherits) from —
and [property declarations](#property-declaration) in the element's body add more. \{#sls.prop.def}

A property holds a value of the property's type;
reading the property yields its current value. \{#sls.prop.def.value}

## Property Declaration

A *property declaration* adds a property to the element in whose body it appears.
It consists of the keyword `property`, the type in angle brackets, and a name,
optionally preceded by a visibility modifier,
optionally followed by `:` and an expression that [binds](/reference/language/bindings/) to the property,
and ends with `;`. \{#sls.prop.decl.form}

```slint
export component Example inherits Window {
    in property <color> tint;
    in-out property <length> gap: 10px;
}
```

The modifier declares the property's *visibility*:
which side may read and set the property's value. \{#sls.prop.decl.visibility}

An `in` property is an input of the component. \{#sls.prop.decl.in}

On the root element of a component the application instantiates directly, the application sets
its value through the generated API. \{#sls.prop.decl.in.root}

On any other element, the enclosing component sets its value with a binding. \{#sls.prop.decl.in.child}

An `out` property is an output of the component:
the component determines its value, and the application reads it. \{#sls.prop.decl.out}

An `in-out` property is both: the application sets and reads its value. \{#sls.prop.decl.in-out}

A `private` property is internal to the component:
the application can neither set nor read it.
Private is the default: a declaration without a modifier declares a private property. \{#sls.prop.decl.private}

<OnlyInSC>
Properties shall only be declared on the root element. \{#sls.prop.decl.root-only}
</OnlyInSC>
</SC>


<SC>
<OnlyInSC>
The declared type can be any valid property type. \{#sls.prop.decl.types}
</OnlyInSC>
</SC>


<SC>
Without a binding, the property has the default value of its
type. \{#sls.prop.decl.default}
</SC>