[ui][radio list] support required, disabled and item descriptions

apps/storybook/stories/radio-list.stories.tsx

@@ -83,6 +83,7 @@ export function Controlled() {
 
   return (
     <RadioList
+      description="You will be served it during dinner"
       label="Choose a fruit"
       value={value}
       onChange={(newValue: string) => setValue(newValue)}>
@@ -93,6 +94,132 @@ export function Controlled() {
   );
 }
 
+export function Required() {
+  const items = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <RadioList
+      description="You will be served it during dinner"
+      label="Choose a fruit"
+      required={true}
+      value={value}
+      onChange={(newValue: string) => setValue(newValue)}>
+      {items.map(({ label: itemLabel, value: itemValue }) => (
+        <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+      ))}
+    </RadioList>
+  );
+}
+
+export function Disabled() {
+  const items = [
+    {
+      description: 'A red fruit',
+      disabled: false,
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      description: 'A yellow fruit',
+      disabled: true,
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      description: 'An orange fruit',
+      disabled: false,
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <div className="space-y-4">
+      <RadioList
+        disabled={true}
+        label="Choose a fruit (all fruits disabled)"
+        value={value}
+        onChange={(newValue: string) => setValue(newValue)}>
+        {items.map(({ label: itemLabel, value: itemValue }) => (
+          <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+        ))}
+      </RadioList>
+      <HorizontalDivider />
+      <RadioList
+        defaultValue={value}
+        label="Choose a fruit (some fruits disabled)"
+        name="fruit-5">
+        {items.map(
+          ({ description, label: itemLabel, value: itemValue, disabled }) => (
+            <RadioList.Item
+              key={itemLabel}
+              description={description}
+              disabled={disabled}
+              label={itemLabel}
+              value={itemValue}
+            />
+          ),
+        )}
+      </RadioList>
+    </div>
+  );
+}
+
+export function ItemDescriptions() {
+  const items = [
+    {
+      description: 'A red fruit',
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      description: 'A yellow fruit',
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      description: 'An orange fruit',
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <RadioList
+      label="Choose a fruit"
+      value={value}
+      onChange={(newValue: string) => setValue(newValue)}>
+      {items.map(({ description, label: itemLabel, value: itemValue }) => (
+        <RadioList.Item
+          key={itemValue}
+          description={description}
+          label={itemLabel}
+          value={itemValue}
+        />
+      ))}
+    </RadioList>
+  );
+}
+
 export function Orientation() {
   const items = [
     {