Fix docs for control inputs with initial checked state

Since this is an uncontrolled component, passing the `checked` prop is
overriding the `checked` attribute in the DOM. If we use
`defaultChecked` it will allow for subsequent updates to be
uncontrolled.

Author: sukhrajghuman

packages/control-input/CHANGELOG.md

@@ -15,6 +15,7 @@
 
 ## Versions
 
+* [v2.1.7 - Replace `checked` attribute with `defaultChecked` on control inputs examples](#v217)
 * [v2.1.6 - Update dependencies](#v216)
 * [v2.1.5 - Removing web pack dev server, updating dependencies](#v215)
 * [v2.1.4 - Fixed build scripts for Windows](#v214)
@@ -38,6 +39,11 @@
 
 ## Release History
 
+### v2.1.7
+
+- Replace `checked` attribute with `defaultChecked` on control inputs examples
+
+
 ### v2.1.6
 
 - Update dependencies

packages/control-input/README.md

@@ -116,6 +116,7 @@ The visual test: https://uikit.service.gov.au/packages/control-input/tests/site/
 
 ## Release History
 
+* v2.1.7 - Replace `checked` attribute with `defaultChecked` on control inputs examples
 * v2.1.6 - Update dependencies
 * v2.1.5 - Removing web pack dev server, updating dependencies
 * v2.1.4 - Fixed build scripts for Windows

packages/control-input/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gov.au/control-input",
-	"version": "2.1.6",
+	"version": "2.1.7",
 	"description": "Control inputs include radio buttons and checkboxes. They allow users to select one or more options.",
 	"keywords": [
 		"uikit",

packages/control-input/tests/react/index.js

@@ -170,13 +170,13 @@ ReactDOM.render(
 
 				<hr />
 				<h2>invalid checkboxes with and without classes</h2>
-				<AUcheckbox label="I agree" status="invalid" checked />
+				<AUcheckbox label="I agree" status="invalid" defaultChecked />
 				<AUcheckbox label="I agree" required />
 
 
 				<hr />
 				<h2>invalid radio buttons with and without classes</h2>
-				<AUradio label="I agree" status="invalid" checked />
+				<AUradio label="I agree" status="invalid" defaultChecked />
 				<AUradio label="I agree" required />
 
 
@@ -281,13 +281,13 @@ ReactDOM.render(
 
 				<hr />
 				<h2>invalid checkboxes with and without classes <code>--dark</code></h2>
-				<AUcheckbox dark label="I agree" status="invalid" checked />
+				<AUcheckbox dark label="I agree" status="invalid" defaultChecked />
 				<AUcheckbox dark label="I agree" required />
 
 
 				<hr />
 				<h2>invalid radio buttons with and without classes <code>--dark</code></h2>
-				<AUradio dark label="I agree" status="invalid" checked />
+				<AUradio dark label="I agree" status="invalid" defaultChecked />
 				<AUradio dark label="I agree" required />
 			</div>
 		</div>
@@ -363,13 +363,13 @@ ReactDOM.render(
 
 				<hr />
 				<h2>invalid checkboxes with and without classes <code>--alt</code></h2>
-				<AUcheckbox alt label="I agree" status="invalid" checked />
+				<AUcheckbox alt label="I agree" status="invalid" defaultChecked />
 				<AUcheckbox alt label="I agree" required />
 
 
 				<hr />
 				<h2>invalid radio buttons with and without classes <code>--alt</code></h2>
-				<AUradio alt label="I agree" status="invalid" checked />
+				<AUradio alt label="I agree" status="invalid" defaultChecked />
 				<AUradio alt label="I agree" required />
 			</div>
 			<div className="split split--alt split--dark">
@@ -441,13 +441,13 @@ ReactDOM.render(
 
 				<hr />
 				<h2>invalid checkboxes with and without classes <code>--alt --dark</code></h2>
-				<AUcheckbox alt dark label="I agree" status="invalid" checked />
+				<AUcheckbox alt dark label="I agree" status="invalid" defaultChecked />
 				<AUcheckbox alt dark label="I agree" required />
 
 
 				<hr />
 				<h2>invalid radio buttons with and without classes <code>--alt --dark</code></h2>
-				<AUradio alt dark label="I agree" status="invalid" checked />
+				<AUradio alt dark label="I agree" status="invalid" defaultChecked />
 				<AUradio alt dark label="I agree" required />
 			</div>
 		</div>