Added label for forms

This commit is contained in:
2026-03-13 09:21:27 +08:00
parent bd20f5a5cf
commit 4478a74ece
4 changed files with 36 additions and 17 deletions

View File

@@ -50,14 +50,17 @@ const ViewUserPage = () => {
{/* Input fields */} {/* Input fields */}
<form className={editUserStyle.fields}> <form className={editUserStyle.fields}>
{/* Role and Dropdown */} {/* Role and Dropdown */}
<SelectField <div className={editUserStyle.roleField}>
label="Select Role" <p>Role</p>
options={[ <SelectField
{ label: "Option", value: "Option" }, label="Select Role"
{ label: "Option 1", value: "Option 1" }, options={[
{ label: "Option 2", value: "Option 2" }, { label: "Option", value: "Option" },
]} { label: "Option 1", value: "Option 1" },
/> { label: "Option 2", value: "Option 2" },
]}
/>
</div>
{/* Email */} {/* Email */}
<div className={editUserStyle.inputMainContainer}> <div className={editUserStyle.inputMainContainer}>
<div className={editUserStyle.inputContainer}> <div className={editUserStyle.inputContainer}>

View File

@@ -99,7 +99,13 @@
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
} }
.roleField {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.inputField { .inputField {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -54,14 +54,17 @@ const AddUserPage = () => {
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
> >
{/* Role and Dropdown */} {/* Role and Dropdown */}
<SelectField <div className={addUserStyle.roleField}>
label="Select Role" <p>Role</p>
options={[ <SelectField
{ label: "Option", value: "Option" }, label="Select Role"
{ label: "Option 1", value: "Option 1" }, options={[
{ label: "Option 2", value: "Option 2" }, { label: "Option", value: "Option" },
]} { label: "Option 1", value: "Option 1" },
/> { label: "Option 2", value: "Option 2" },
]}
/>
</div>
{/* Email */} {/* Email */}
<div className={addUserStyle.inputMainContainer}> <div className={addUserStyle.inputMainContainer}>
<div className={addUserStyle.inputContainer}> <div className={addUserStyle.inputContainer}>

View File

@@ -86,6 +86,13 @@
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
} }
.roleField {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.inputField { .inputField {
display: flex; display: flex;
flex-direction: column; flex-direction: column;