[00:00] Perspective's input components allow your users to interact directly with the screen. There are Entry Fields, Sliders, Buttons and more. We are going to take a look at some of the commonly used ones in this video. Now the first component that I want to add is the Toggle Switch. This is one of the simplest components. It just has a selected property which is either true or false, if the switch is left or right. And it also has a label property that has both text and position. I'll add some text here, switch, and then you can see that it shows up. Now if I stretch my component up a little bit it will look better. Here we go. And if I change my position from right to left, then you can see the text switches sides. The next component that I want to take a look at is the Numeric Entry Field. If I drop one of these guys on the screen, then you can see we have a value property and I can type in whatever I want here, 45.3. And you can see that my format is having two decimal places here. And I can change that if I want, so let's display it as an integer. And I can also set input bounds so something like zero and 100 as my minimum and maximum, so that way, if I were to type a value in, above or below those, so, let's say 102, then the value goes back to what it was. This component also has three different modes, direct, protected and button. Protected just means you have to double click in order to type in, and button means you have this little button next to your number. If I click on the button, you can see we get this little popup and I can change my value using these up or down buttons, or by typing in directly, and then hit 'Apply' to submit. There's also a placeholder text, I can type in here, "Enter a Value", and anytime we have a value that is null, you'll see that placeholder text over the component. The next component I wanna talk about is the slider. I'll go out of preview mode here and I'll grab a slider component and drop it on the screen. Now, if I make this component a little bit larger here, and go back into preview mode, you can see that this is just a handle for me to click and drag, and you'll see that my value property is changing. With a minimum and a maximum, or left and right, being zero to 100. I can also change my orientation from horizontal to vertical. I can change the step, so that my value move in increments of that number. I can also set labels, and I can set the interball of those labels. And, if you want to, you can change the handle colors to whatever you like. Now, I'm gonna take another component out here. Take it out of preview mode and I'm gonna grab my radio group, and drop this guy on the screen. You can see it shows up with a single radio button, but it has a radios property, it has one entry here I can add a couple of more array elements, and you can see now I have zero, one and two, with three different radio buttons. You can see my radios two, I can change my text here. I'll say number three. And if I change my selected to true, then you can see that one becomes true. Now, I can also set a value, I'll say 12. So then you can see the value and index property up above, show me the value associated with what I have selected, and the index of the radio button that I have selected. I can also change the orientation of my row, so I'll go to column. But you can see it doesn't show very much here. If I make my component wider and then shorter, then you can see how our third radio button wraps. If I change my orientation back to row, you can see that the number three is now on the bottom, it goes left to right, top to bottom. And, of course, you can change the text position, so you can say I want my text on top of my radio buttons. The last component I want to talk about is the multi-state button. I'm gonna drag a multi-state button on the screen here, and you can see it shows up as 'hand', 'off' and 'auto' as the three buttons, and those correspond to the three states, zero, one and two. I can change my text from hand to, maybe, machine? So, the way this button works is, when you press the machine button it will set a value of two to the controlValue property. If I go into preview mode, and then click the machine button, you can see nothing really happens, but our controlValue has been set to two. The problem is the indicatorValue is the one that changes which button is displayed as active. So, what I'll do, is I'll take this 'WriteableInteger1' tag, and I'll drag it onto my indicatorValue, and I'll do the same, drag it onto my controlValue as well. Now, one small thing we need to do, is I need to go onto my binding here, on my controlValue, and make sure that 'Bidirectional' is set, so that way, when we write to the value, it will write to the tag. So I'll hit 'OK' here and I'm still in preview mode. Now I can click on my machine button, sets my controller value to two, which ends up setting my integer value as well. I can go to auto, and it'll set them both to one. There are more input components than I've mentioned here, I encourage you to try them out and play with some of the properties and get familiar with all of them.