SmartHR Design System

FormDialog

フォーム要素を内包し、ユーザーに入力や選択などの操作を求めるためのActionDialog派生のダイアログコンポーネントです。ダイアログ内で入力フォームを送信するとき、Enterキーでの送信が必要なときに使います。

各種基準はActionDialogと共通です。

使用上の注意

ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する

ダイアログコンテンツにフォーム要素を含む場合にはFormDialogの使用を検討してください。

FormDialogは内部でコンテンツを<form>要素で包むため、ActionDialogにはない以下の挙動を持ちます。ユースケースに合わせて使い分けてください。

  • Enterキーの押下でアクションボタンの送信処理を実行します。
  • アクション系コールバックはonSubmitで、引数はFormEvent<HTMLFormElement>を受け取ります（ActionDialogのonClickActionはMouseEventを受け取ります）。

使い方チェックリスト

FormDialog
参照元：使用上の注意 > ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する 「使用上の注意 > ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する」の本文へ移動
  • Should
    ダイアログコンテンツにフォーム要素を含む場合は FormDialog の使用を検討する
    • `Enter` キーの押下でアクションボタンの送信処理を実行する
    • アクション系コールバックは `onSubmit` で、引数は `FormEvent<HTMLFormElement>` を受け取る

Props

FormDialog props

size
"XS""S""M""L""XL""XXL""FULL"

ダイアログの大きさ

width非推奨
stringnumber

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。 ダイアログの幅

className
string
onSubmit必須
(e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void

アクションボタンをクリックした時に発火するコールバック関数 @param e フォームイベント @param helpers ダイアログ操作のためのヘルパー関数

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ sub?: ReactNode; text: ReactNode; }
closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ text: ReactNode; disabled?: boolean; }
subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログフッターの左端操作領域

responseStatus
ResponseStatusWithoutProcessing{ status: "processing"; }
firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

onPressEscape
(() => void) & ((close: () => void) => void)

エスケープキーを押下した時に発火するコールバック関数

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素

contentBgColor
"BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND""WHITE""GREY_5""GREY_6""GREY_7""GREY_9""GREY_20"
contentPadding
0120.250.50.751.251.52.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""XXS""XS""S""M""L""XL""XXL""X3L"{ block?: Gap; inline?: Gap; }
actionButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }
onClickClose
(close: () => void) => void
onToggle
(isOpen: boolean) => void
onOpen
() => void
onClose
() => void

ControlledFormDialog props

className
string
onSubmit必須
(e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void

アクションボタンをクリックした時に発火するコールバック関数 @param e フォームイベント @param helpers ダイアログ操作のためのヘルパー関数

subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログフッターの左端操作領域

responseStatus
ResponseStatusWithoutProcessing{ status: "processing"; }
contentBgColor
"BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND""WHITE""GREY_5""GREY_6""GREY_7""GREY_9""GREY_20"
contentPadding
0120.250.50.751.251.52.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""XXS""XS""S""M""L""XL""XXL""X3L"{ block?: Gap; inline?: Gap; }
onClickClose必須
() => void
size
"XS""S""M""L""XL""XXL""FULL"

ダイアログの大きさ

width非推奨
stringnumber

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。 ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

ダイアログを開いているかどうか

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

onPressEscape
() => void

エスケープキーを押下した時に発火するコールバック関数

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ sub?: ReactNode; text: ReactNode; }
actionButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }
closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ text: ReactNode; disabled?: boolean; }