增加一个用于给其他组件添加Label的组件。

src/components/Labeled.module.css

@@ -0,0 +1,16 @@
+@layer components {
+  .labeled {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+    label {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      font-size: var(--font-size-xs);
+    }
+  }
+}

src/components/Labeled.tsx

@@ -0,0 +1,15 @@
+import styles from './Labeled.module.css';
+
+type LabeledProps = {
+  label: string;
+  children: React.ReactNode;
+};
+
+export function Labeled({ label, children }: LabeledProps) {
+  return (
+    <div className={styles.labeled}>
+      <label>{label}</label>
+      {children}
+    </div>
+  );
+}