@spscommerce/ds-react 6.5.1 → 6.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/index.cjs.js +571 -128
  2. package/lib/index.es.js +533 -61
  3. package/lib/radio-button/SpsRadioButton.d.ts +2 -1
  4. package/package.json +11 -11
package/lib/index.es.js CHANGED
@@ -32568,6 +32568,7 @@ const propsDoc$w = {
32568
32568
  disabled: "boolean",
32569
32569
  formMeta: "SpsFormFieldMeta<any>",
32570
32570
  inline: "boolean",
32571
+ centered: "boolean",
32571
32572
  label: "string",
32572
32573
  name: { type: "string", required: true },
32573
32574
  onChange: "ChangeEventHandler",
@@ -32579,6 +32580,7 @@ const propTypes$x = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
32579
32580
  formControl: impl(),
32580
32581
  formMeta: impl(),
32581
32582
  inline: propTypes$1G.exports.bool,
32583
+ centered: propTypes$1G.exports.bool,
32582
32584
  label: propTypes$1G.exports.string,
32583
32585
  name: propTypes$1G.exports.string.isRequired,
32584
32586
  onChange: fun(),
@@ -32595,6 +32597,7 @@ function SpsRadioButton(_Q) {
32595
32597
  formMeta,
32596
32598
  id: id2,
32597
32599
  inline,
32600
+ centered,
32598
32601
  label,
32599
32602
  name,
32600
32603
  onChange,
@@ -32610,6 +32613,7 @@ function SpsRadioButton(_Q) {
32610
32613
  "formMeta",
32611
32614
  "id",
32612
32615
  "inline",
32616
+ "centered",
32613
32617
  "label",
32614
32618
  "name",
32615
32619
  "onChange",
@@ -32620,7 +32624,7 @@ function SpsRadioButton(_Q) {
32620
32624
  const meta = formMeta || formControl2;
32621
32625
  const inputElement = React.useRef();
32622
32626
  const { wrapperId, controlId } = useFormControlId(id2);
32623
- const classes = clsx(unsafelyReplaceClassName || "sps-radio-button", "sps-checkable", inline && "sps-checkable--inline", !label && "sps-checkable--no-label", className);
32627
+ const classes = clsx(unsafelyReplaceClassName || "sps-radio-button", "sps-checkable", inline && "sps-checkable--inline", centered && "sps-checkable--centered", !label && "sps-checkable--no-label", className);
32624
32628
  function handleChange(event) {
32625
32629
  if (meta) {
32626
32630
  meta.setValue(value);
@@ -32661,86 +32665,553 @@ Object.assign(SpsRadioButton, {
32661
32665
  displayName: "SpsRadioButton"
32662
32666
  });
32663
32667
  const SpsRadioButtonExamples = {
32664
- labels: {
32665
- label: "Labels",
32666
- description: "info about radio buttons with labels",
32668
+ general: {
32669
+ label: "General Usage",
32670
+ description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Use Radio Buttons:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "When only one option can be selected from the available options.")), /* @__PURE__ */ React.createElement("h5", null, "Do Not Use Radio Buttons:"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, "When a selection causes an immediate change in the system. Use a", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
32671
+ to: "toggle"
32672
+ }, "Toggle"), " instead."), /* @__PURE__ */ React.createElement("li", null, "When multiple options can be selected from the available options. Use", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
32673
+ to: "checkbox"
32674
+ }, "Checkboxes"), " instead."), /* @__PURE__ */ React.createElement("li", null, "When the list of available options requires too much space to list efficiently. Use", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
32675
+ to: "dropdown"
32676
+ }, "Dropdown"), " instead.")))
32677
+ },
32678
+ basic: {
32679
+ label: "Basic Radio Buttons",
32680
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),
32667
32681
  examples: {
32668
- label: {
32682
+ horizontal: {
32683
+ description: () => /* @__PURE__ */ React.createElement("h4", null, "Horizontal Group"),
32669
32684
  react: code`
32670
32685
  function DemoComponent() {
32671
- const { formValue, formMeta, updateForm } = useSpsForm({
32672
- color: "blue"
32673
- });
32674
-
32675
- return <SpsForm formMeta={formMeta} id="labelRadioButton">
32676
- <SpsRadioButton name="blue" value="blue" label="Blue"
32677
- formMeta={formMeta.fields.color}
32678
- checked={formValue.color === "blue"}
32679
- ></SpsRadioButton>
32680
- <SpsRadioButton name="green" value="green" label="Green"
32681
- formMeta={formMeta.fields.color}
32682
- checked={formValue.color === "green"}
32683
- ></SpsRadioButton>
32686
+ const { formValue, formMeta, updateForm } = useSpsForm({
32687
+ option: "option1",
32688
+ });
32689
+
32690
+ return (
32691
+ <SpsForm formMeta={formMeta}>
32692
+ <SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
32693
+ <SpsRadioButton
32694
+ name="option1"
32695
+ value="option1"
32696
+ label="Option"
32697
+ formMeta={formMeta.fields.option}
32698
+ checked={formValue.option === "option1"}
32699
+ inline
32700
+ />
32701
+ <SpsRadioButton
32702
+ name="option2"
32703
+ value="option2"
32704
+ label="Option"
32705
+ formMeta={formMeta.fields.option}
32706
+ checked={formValue.option === "option2"}
32707
+ inline
32708
+ />
32709
+ <SpsRadioButton
32710
+ name="option3"
32711
+ value="option3"
32712
+ label="Option"
32713
+ formMeta={formMeta.fields.option}
32714
+ checked={formValue.option === "option3"}
32715
+ inline
32716
+ />
32717
+ <SpsRadioButton
32718
+ name="option4"
32719
+ value="option4"
32720
+ label="Option"
32721
+ formMeta={formMeta.fields.option}
32722
+ checked={formValue.option === "option4"}
32723
+ inline
32724
+ />
32725
+ <SpsRadioButton
32726
+ name="option5"
32727
+ value="option5"
32728
+ label="Option"
32729
+ formMeta={formMeta.fields.option}
32730
+ checked={formValue.option === "option5"}
32731
+ inline
32732
+ />
32733
+ <SpsRadioButton
32734
+ name="option6"
32735
+ value="option6"
32736
+ label="Option"
32737
+ formMeta={formMeta.fields.option}
32738
+ checked={formValue.option === "option6"}
32739
+ inline
32740
+ />
32684
32741
  </SpsForm>
32742
+ );
32685
32743
  }
32686
- `
32744
+ `
32745
+ },
32746
+ vertical: {
32747
+ description: () => /* @__PURE__ */ React.createElement("h4", null, "Vertical Group"),
32748
+ react: code`
32749
+ function DemoComponent() {
32750
+ const { formValue, formMeta, updateForm } = useSpsForm({
32751
+ option: "option1",
32752
+ });
32753
+
32754
+ return (
32755
+ <SpsForm formMeta={formMeta}>
32756
+ <SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
32757
+ <SpsRadioButton
32758
+ name="option1"
32759
+ value="option1"
32760
+ label="Option"
32761
+ formMeta={formMeta.fields.option}
32762
+ checked={formValue.option === "option1"}
32763
+ />
32764
+ <SpsRadioButton
32765
+ name="option2"
32766
+ value="option2"
32767
+ label="Option"
32768
+ formMeta={formMeta.fields.option}
32769
+ checked={formValue.option === "option2"}
32770
+ />
32771
+ <SpsRadioButton
32772
+ name="option3"
32773
+ value="option3"
32774
+ label="Option"
32775
+ formMeta={formMeta.fields.option}
32776
+ checked={formValue.option === "option3"}
32777
+ />
32778
+ <SpsRadioButton
32779
+ name="option4"
32780
+ value="option4"
32781
+ label="Option"
32782
+ formMeta={formMeta.fields.option}
32783
+ checked={formValue.option === "option4"}
32784
+ />
32785
+ <SpsRadioButton
32786
+ name="option5"
32787
+ value="option5"
32788
+ label="Option"
32789
+ formMeta={formMeta.fields.option}
32790
+ checked={formValue.option === "option5"}
32791
+ />
32792
+ <SpsRadioButton
32793
+ name="option6"
32794
+ value="option6"
32795
+ label="Option"
32796
+ formMeta={formMeta.fields.option}
32797
+ checked={formValue.option === "option6"}
32798
+ />
32799
+ </SpsForm>
32800
+ );
32801
+ }
32802
+ `
32803
+ },
32804
+ verticalAlternate: {
32805
+ description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Vertical Group Alternate"), /* @__PURE__ */ React.createElement("p", null, "Radio Buttons can be used in vertical groups with multiple columns when common radio options are shared across multiple categories. In these cases the options are represented as a column title and shared for every row or category (i.e. only one option can be selected in each row).")),
32806
+ react: code`
32807
+ function DemoComponent() {
32808
+ const { formValue, formMeta, updateForm } = useSpsForm({
32809
+ categories: {
32810
+ category1: "category1.option1",
32811
+ category2: "category2.option2",
32812
+ category3: "category3.option3",
32813
+ category4: "",
32814
+ category5: "",
32815
+ category6: "",
32816
+ },
32817
+ });
32818
+
32819
+ return (
32820
+ <SpsForm formMeta={formMeta}>
32821
+ <table>
32822
+ <tr>
32823
+ <td style={{ width: "8.125rem" }}>
32824
+ <SpsLabel for={formMeta.fields.categories}>Radio Label</SpsLabel>
32825
+ </td>
32826
+ <td style={{ width: "3.125rem" }}>
32827
+ <div className="text-center mb-1">Option</div>
32828
+ </td>
32829
+ <td style={{ width: "3.125rem" }}>
32830
+ <div className="text-center mb-1">Option</div>
32831
+ </td>
32832
+ <td style={{ width: "3.125rem" }}>
32833
+ <div className="text-center mb-1">Option</div>
32834
+ </td>
32835
+ </tr>
32836
+ <tr>
32837
+ <td>
32838
+ <div className="mb-2">Category</div>
32839
+ </td>
32840
+ <td>
32841
+ <SpsRadioButton
32842
+ name="category1.option1"
32843
+ value="category1.option1"
32844
+ formMeta={formMeta.fields.categories.fields.category1}
32845
+ checked={formValue.categories.category1 === "category1.option1"}
32846
+ centered
32847
+ />
32848
+ </td>
32849
+ <td>
32850
+ <SpsRadioButton
32851
+ name="category1.option2"
32852
+ value="category1.option2"
32853
+ formMeta={formMeta.fields.categories.fields.category1}
32854
+ checked={formValue.categories.category1 === "category1.option2"}
32855
+ centered
32856
+ />
32857
+ </td>
32858
+ <td>
32859
+ <SpsRadioButton
32860
+ name="category1.option3"
32861
+ value="category1.option3"
32862
+ formMeta={formMeta.fields.categories.fields.category1}
32863
+ checked={formValue.categories.category1 === "category1.option3"}
32864
+ centered
32865
+ />
32866
+ </td>
32867
+ </tr>
32868
+ <tr>
32869
+ <td>
32870
+ <div className="mb-2">Category</div>
32871
+ </td>
32872
+ <td>
32873
+ <SpsRadioButton
32874
+ name="category2.option1"
32875
+ value="category2.option1"
32876
+ formMeta={formMeta.fields.categories.fields.category2}
32877
+ checked={formValue.categories.category2 === "category2.option1"}
32878
+ centered
32879
+ />
32880
+ </td>
32881
+ <td>
32882
+ <SpsRadioButton
32883
+ name="category2.option2"
32884
+ value="category2.option2"
32885
+ formMeta={formMeta.fields.categories.fields.category2}
32886
+ checked={formValue.categories.category2 === "category2.option2"}
32887
+ centered
32888
+ />
32889
+ </td>
32890
+ <td>
32891
+ <SpsRadioButton
32892
+ name="category2.option3"
32893
+ value="category2.option3"
32894
+ formMeta={formMeta.fields.categories.fields.category2}
32895
+ checked={formValue.categories.category2 === "category2.option3"}
32896
+ centered
32897
+ />
32898
+ </td>
32899
+ </tr>
32900
+ <tr>
32901
+ <td>
32902
+ <div className="mb-2">Category</div>
32903
+ </td>
32904
+ <td>
32905
+ <SpsRadioButton
32906
+ name="category3.option1"
32907
+ value="category3.option1"
32908
+ formMeta={formMeta.fields.categories.fields.category3}
32909
+ checked={formValue.categories.category3 === "category3.option1"}
32910
+ centered
32911
+ />
32912
+ </td>
32913
+ <td>
32914
+ <SpsRadioButton
32915
+ name="category3.option2"
32916
+ value="category3.option2"
32917
+ formMeta={formMeta.fields.categories.fields.category3}
32918
+ checked={formValue.categories.category3 === "category3.option2"}
32919
+ centered
32920
+ />
32921
+ </td>
32922
+ <td>
32923
+ <SpsRadioButton
32924
+ name="category3.option3"
32925
+ value="category3.option3"
32926
+ formMeta={formMeta.fields.categories.fields.category3}
32927
+ checked={formValue.categories.category3 === "category3.option3"}
32928
+ centered
32929
+ />
32930
+ </td>
32931
+ </tr>
32932
+ <tr>
32933
+ <td>
32934
+ <div className="mb-2">Category</div>
32935
+ </td>
32936
+ <td>
32937
+ <SpsRadioButton
32938
+ name="category4.option1"
32939
+ value="category4.option1"
32940
+ formMeta={formMeta.fields.categories.fields.category4}
32941
+ checked={formValue.categories.category4 === "category4.option1"}
32942
+ centered
32943
+ />
32944
+ </td>
32945
+ <td>
32946
+ <SpsRadioButton
32947
+ name="category4.option2"
32948
+ value="category4.option2"
32949
+ formMeta={formMeta.fields.categories.fields.category4}
32950
+ checked={formValue.categories.category4 === "category4.option2"}
32951
+ centered
32952
+ />
32953
+ </td>
32954
+ <td>
32955
+ <SpsRadioButton
32956
+ name="category4.option3"
32957
+ value="category4.option3"
32958
+ formMeta={formMeta.fields.categories.fields.category4}
32959
+ checked={formValue.categories.category4 === "category4.option3"}
32960
+ centered
32961
+ />
32962
+ </td>
32963
+ </tr>
32964
+ <tr>
32965
+ <td>
32966
+ <div className="mb-2">Category</div>
32967
+ </td>
32968
+ <td>
32969
+ <SpsRadioButton
32970
+ name="category5.option1"
32971
+ value="category5.option1"
32972
+ formMeta={formMeta.fields.categories.fields.category5}
32973
+ checked={formValue.categories.category5 === "category5.option1"}
32974
+ centered
32975
+ />
32976
+ </td>
32977
+ <td>
32978
+ <SpsRadioButton
32979
+ name="category5.option2"
32980
+ value="category5.option2"
32981
+ formMeta={formMeta.fields.categories.fields.category5}
32982
+ checked={formValue.categories.category5 === "category5.option2"}
32983
+ centered
32984
+ />
32985
+ </td>
32986
+ <td>
32987
+ <SpsRadioButton
32988
+ name="category5.option3"
32989
+ value="category5.option3"
32990
+ formMeta={formMeta.fields.categories.fields.category5}
32991
+ checked={formValue.categories.category5 === "category5.option3"}
32992
+ centered
32993
+ />
32994
+ </td>
32995
+ </tr>
32996
+ <tr>
32997
+ <td>
32998
+ <div className="mb-2">Category</div>
32999
+ </td>
33000
+ <td>
33001
+ <SpsRadioButton
33002
+ name="category6.option1"
33003
+ value="category6.option1"
33004
+ formMeta={formMeta.fields.categories.fields.category6}
33005
+ checked={formValue.categories.category6 === "category6.option1"}
33006
+ centered
33007
+ />
33008
+ </td>
33009
+ <td>
33010
+ <SpsRadioButton
33011
+ name="category6.option2"
33012
+ value="category6.option2"
33013
+ formMeta={formMeta.fields.categories.fields.category6}
33014
+ checked={formValue.categories.category6 === "category6.option2"}
33015
+ centered
33016
+ />
33017
+ </td>
33018
+ <td>
33019
+ <SpsRadioButton
33020
+ name="category6.option3"
33021
+ value="category6.option3"
33022
+ formMeta={formMeta.fields.categories.fields.category6}
33023
+ checked={formValue.categories.category6 === "category6.option3"}
33024
+ centered
33025
+ />
33026
+ </td>
33027
+ </tr>
33028
+ </table>
33029
+ </SpsForm>
33030
+ );
33031
+ }
33032
+ `
32687
33033
  }
32688
33034
  }
32689
33035
  },
32690
- b_disabled: {
32691
- label: "Disabled",
32692
- description: "info about disabled radio buttons",
33036
+ conditional: {
33037
+ label: "Radio Buttons With Conditional Inputs",
33038
+ description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Conditional input fields can be nested \u201Cunderneath\u201D radio buttons. These conditional inputs display only when the corresponding radio option is in the selected state. Multiple conditional inputs can be nested under a single radio buttons."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("i", null, "Note: Conditional Inputs can appear with or without labels, depending on context."))),
32693
33039
  examples: {
32694
- disabled: {
33040
+ horizontal: {
33041
+ description: () => /* @__PURE__ */ React.createElement("h4", null, "Horizontal"),
32695
33042
  react: code`
32696
33043
  function DemoComponent() {
32697
- const { formValue, formMeta, updateForm } = useSpsForm({
32698
- color: "blue"
32699
- });
32700
-
32701
- return <SpsForm formMeta={formMeta}>
32702
- <SpsRadioButton name="blue" value="blue" label="Blue"
32703
- formMeta={formMeta.fields.color}
32704
- checked={formValue.color === "blue"}
32705
- disabled
32706
- ></SpsRadioButton>
32707
- <SpsRadioButton name="green" value="green" label="Green"
32708
- formMeta={formMeta.fields.color}
32709
- checked={formValue.color === "green"}
32710
- disabled
32711
- ></SpsRadioButton>
33044
+ const { formValue, formMeta, updateForm } = useSpsForm({
33045
+ radio1: "radio1.option1",
33046
+ radio2: "radio2.option1",
33047
+ });
33048
+
33049
+ return (
33050
+ <SpsForm formMeta={formMeta}>
33051
+ <SpsLabel for={formMeta.fields.radio1}>Radio Label</SpsLabel>
33052
+ <SpsInputGroup>
33053
+ <SpsRadioButton
33054
+ name="radio1.option1"
33055
+ value="radio1.option1"
33056
+ label="Option"
33057
+ formMeta={formMeta.fields.radio1}
33058
+ checked={formValue.radio1 === "radio1.option1"}
33059
+ inline
33060
+ />
33061
+
33062
+ <SpsRadioButton
33063
+ name="radio1.option2"
33064
+ value="radio1.option2"
33065
+ label="Option"
33066
+ formMeta={formMeta.fields.radio1}
33067
+ checked={formValue.radio1 === "radio1.option2"}
33068
+ inline
33069
+ />
33070
+ <SpsRadioButton
33071
+ name="radio1.option3"
33072
+ value="radio1.option3"
33073
+ label="Option"
33074
+ formMeta={formMeta.fields.radio1}
33075
+ checked={formValue.radio1 === "radio1.option3"}
33076
+ inline
33077
+ />
33078
+ <SpsRadioButton
33079
+ name="radio1.option4"
33080
+ value="radio1.option4"
33081
+ label="Option"
33082
+ formMeta={formMeta.fields.radio1}
33083
+ checked={formValue.radio1 === "radio1.option4"}
33084
+ inline
33085
+ />
33086
+ </SpsInputGroup>
33087
+ <SpsConditionalField
33088
+ showCondition={formValue.radio1 === "radio1.option1"}
33089
+ >
33090
+ <SpsLabel for={formMeta.fields.radio2}>Radio Label</SpsLabel>
33091
+ <SpsRadioButton
33092
+ name="radio2.option1"
33093
+ value="radio2.option1"
33094
+ label="Option"
33095
+ formMeta={formMeta.fields.radio2}
33096
+ checked={formValue.radio2 === "radio2.option1"}
33097
+ />
33098
+ <SpsRadioButton
33099
+ name="radio2.option2"
33100
+ value="radio2.option2"
33101
+ label="Option"
33102
+ formMeta={formMeta.fields.radio2}
33103
+ checked={formValue.radio2 === "radio2.option2"}
33104
+ />
33105
+ <SpsRadioButton
33106
+ name="radio2.option3"
33107
+ value="radio2.option3"
33108
+ label="Option"
33109
+ formMeta={formMeta.fields.radio2}
33110
+ checked={formValue.radio2 === "radio2.option3"}
33111
+ />
33112
+ </SpsConditionalField>
32712
33113
  </SpsForm>
33114
+ );
32713
33115
  }
32714
- `
33116
+ `
33117
+ },
33118
+ vertical: {
33119
+ description: () => /* @__PURE__ */ React.createElement("h4", null, "Vertical"),
33120
+ react: code`
33121
+ function DemoComponent() {
33122
+ const { formValue, formMeta, updateForm } = useSpsForm({
33123
+ radio: "option1",
33124
+ companyName: "",
33125
+ });
33126
+
33127
+ return (
33128
+ <SpsForm formMeta={formMeta}>
33129
+ <SpsLabel for={formMeta.fields.radio}>Radio Label</SpsLabel>
33130
+ <SpsInputGroup stacked>
33131
+ <SpsRadioButton
33132
+ name="option1"
33133
+ value="option1"
33134
+ label="Option"
33135
+ formMeta={formMeta.fields.radio}
33136
+ checked={formValue.radio === "option1"}
33137
+ />
33138
+ <SpsConditionalField
33139
+ showCondition={formValue.radio === "option1"}
33140
+ >
33141
+ <div className="sfg-row">
33142
+ <div className="sfg-col-4">
33143
+ <SpsLabel for={formMeta.fields.companyName}>Company Name</SpsLabel>
33144
+ <SpsTextInput
33145
+ value={formValue.companyName}
33146
+ formMeta={formMeta.fields.companyName}
33147
+ placeholder="Enter a thing"
33148
+ />
33149
+ </div>
33150
+ </div>
33151
+ </SpsConditionalField>
33152
+ <SpsRadioButton
33153
+ name="option2"
33154
+ value="option2"
33155
+ label="Option"
33156
+ formMeta={formMeta.fields.radio}
33157
+ checked={formValue.radio === "option2"}
33158
+ />
33159
+ <SpsRadioButton
33160
+ name="option3"
33161
+ value="option3"
33162
+ label="Option"
33163
+ formMeta={formMeta.fields.radio}
33164
+ checked={formValue.radio === "option3"}
33165
+ />
33166
+ <SpsRadioButton
33167
+ name="option4"
33168
+ value="option4"
33169
+ label="Option"
33170
+ formMeta={formMeta.fields.radio}
33171
+ checked={formValue.radio === "option4"}
33172
+ />
33173
+ </SpsInputGroup>
33174
+ </SpsForm>
33175
+ );
33176
+ }
33177
+ `
32715
33178
  }
32716
33179
  }
32717
33180
  },
32718
- c_noLabels: {
32719
- label: "No Labels",
32720
- description: "info about radio buttons without labels",
33181
+ disabled: {
33182
+ label: "Disabled State",
33183
+ description: "Radio Buttons have a disabled style for each possible state.",
32721
33184
  examples: {
32722
- noLabels: {
33185
+ disabled: {
32723
33186
  react: code`
32724
33187
  function DemoComponent() {
32725
- const { formValue, formMeta, updateForm } = useSpsForm({
32726
- color: "green"
32727
- });
32728
-
32729
- return (
32730
- <SpsForm formMeta={formMeta}>
32731
- <SpsRadioButton name="blue" value="blue"
32732
- className="mb-2"
32733
- formMeta={formMeta.fields.color}
32734
- checked={formValue.color === "blue"}
32735
- ></SpsRadioButton>
32736
- <SpsRadioButton name="green" value="green"
32737
- formMeta={formMeta.fields.color}
32738
- checked={formValue.color === "green"}
32739
- ></SpsRadioButton>
32740
- </SpsForm>
32741
- )
33188
+ const { formValue, formMeta, updateForm } = useSpsForm({
33189
+ option: "option1",
33190
+ });
33191
+
33192
+ return (
33193
+ <SpsForm formMeta={formMeta}>
33194
+ <SpsLabel for={formMeta.fields.option}>Radio Label</SpsLabel>
33195
+ <SpsRadioButton
33196
+ name="option1"
33197
+ value="option1"
33198
+ label="Option"
33199
+ formMeta={formMeta.fields.option}
33200
+ checked={formValue.option === "option1"}
33201
+ disabled
33202
+ />
33203
+ <SpsRadioButton
33204
+ name="option2"
33205
+ value="option2"
33206
+ label="Option"
33207
+ formMeta={formMeta.fields.option}
33208
+ checked={formValue.option === "option2"}
33209
+ disabled
33210
+ />
33211
+ </SpsForm>
33212
+ );
32742
33213
  }
32743
- `
33214
+ `
32744
33215
  }
32745
33216
  }
32746
33217
  }
@@ -37679,6 +38150,7 @@ const MANIFEST = {
37679
38150
  examples: SpsProgressBarExamples
37680
38151
  },
37681
38152
  "Radio Buttons": {
38153
+ description: "Radio Buttons allow a user to make single selection from a list of predefined options.",
37682
38154
  components: [SpsRadioButton],
37683
38155
  examples: SpsRadioButtonExamples
37684
38156
  },