docs(radio): add a relevant example

telus · Dec 8, 2017 · 15cbf07 · 15cbf07
1 parent ca03770
commit 15cbf07
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/components/Radio/Radio.md b/src/components/Radio/Radio.md
@@ -5,9 +5,18 @@ initialState = {
 
 const setChoice = (value) => setState({choice: value});
 
-<Box tag="fieldset" between={2}>
-  <legend>Please choose one of the following:</legend>
-  <Radio label="Choice A" name="group1" value="a" checked={state.choice === "a"} onChange={e => setChoice(e.target.value)} />
-  <Radio label="Choice B" name="group1" value="b" checked={state.choice === "b"} onChange={e => setChoice(e.target.value)} />
+<Box tag="fieldset" between={3}>
+	<Text size="small">
+    Choose one combination of area code and first 3 digits to see the available numbers in that range:
+  </Text>
+  <Box tag="fieldset" between={2}>
+    <Text bold size="small">
+      Area code (416)
+    </Text>
+    <Radio label="(416) 547" name="group1" value="a" checked={state.choice === "a"} onChange={e => setChoice(e.target.value)} />
+    <Radio label="(416) 871" name="group1" value="b" checked={state.choice === "b"} onChange={e => setChoice(e.target.value)} />
+    <Radio label="(416) 321" name="group1" value="b" checked={state.choice === "b"} onChange={e => setChoice(e.target.value)} />
+    <Radio label="(416) 384" name="group1" value="b" checked={state.choice === "b"} onChange={e => setChoice(e.target.value)} />
+  </Box>
 </Box>
 ```