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```ts
31// xxx.ets
32@Entry
33@Component
34struct VisibilityExample {
35  build() {
36    Column() {
37      Column() {
38        // The component is hidden and does not take up space in the layout.
39        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
40        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
41
42        // The component is hidden but takes up space in the layout.
43        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
44        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
45
46        // The component is visible, which is the default display mode.
47        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
48        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
49      }.width('90%').border({ width: 1 })
50    }.width('100%').margin({ top: 5 })
51  }
52}
53```
54
55![visibility.png](figures/visibility.png)
56