patternfly-elements/elements/pf-radio/demo/pf-radio.html at 3ed8f18653877645e8ec7b712a65d489bdc67f38 · patternfly/patternfly-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<section class="container">
  <p> Select a title </p>
  <div class="radio-group">
    <pf-radio id="title-mr" value="mr" label="Mr" name="title"></pf-radio>
    <pf-radio id="title-miss" value="miss" label="Miss" name="title"></pf-radio>
    <pf-radio id="title-mrs" value="mrs" label="Mrs" name="title"></pf-radio>
    <pf-radio id="title-ms" value="ms" label="Ms" name="title"></pf-radio>
    <pf-radio id="title-dr" value="dr" label="Dr" name="title"></pf-radio>
    <pf-radio id="title-other" value="other" label="Other" name="title"></pf-radio>
  </div>
  <pf-button> Submit</pf-button>
</section>

<script type="module">
  import '@patternfly/elements/pf-radio/pf-radio.js';
  import '@patternfly/elements/pf-button/pf-button.js';
</script>

<style>
.container{
  padding: 3rem;
}
.container p {
  font-size: 1.5rem;
  margin-block-end: 0.5rem;
}
.radio-group{
  display: flex;
  justify-content: flex-start;
  padding-bottom: 1rem;
}
.radio-group pf-radio{
  padding-right: 1rem;
}
</style>