1# Visibility
2
3The visibility attribute controls whether a component is visible.
4
5>  **NOTE**
6>
7> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## visibility
10
11visibility(value: Visibility)
12
13Sets the visibility of this component.
14
15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets.
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name| Type                                         | Mandatory| Description                                                        |
24| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
25| value  | [Visibility](ts-appendix-enums.md#visibility) | Yes  | Whether the component is visible. When appropriate, consider using [conditional rendering](../../../quick-start/arkts-rendering-control-ifelse.md) as a substitute.<br>Default value: **Visibility.Visible**|
26
27
28## Example
29
30 This example demonstrates how to use the **visibility** configuration to achieve different visibility control effects.
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct VisibilityExample {
37  build() {
38    Column() {
39      Column() {
40        // The component is hidden and does not take up space in the layout.
41        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
42        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
43
44        // The component is hidden but takes up space in the layout.
45        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
46        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
47
48        // The component is visible, which is the default display mode.
49        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
50        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
51      }.width('90%').border({ width: 1 })
52    }.width('100%').margin({ top: 5 })
53  }
54}
55```
56
57![visibility.png](figures/visibility.png)
58