()
| 415 | }; |
| 416 | |
| 417 | export const LeadingDropdown = () => { |
| 418 | return ( |
| 419 | <div className="flex flex-col gap-8"> |
| 420 | <div className="flex flex-col gap-4"> |
| 421 | <InputGroup |
| 422 | isRequired |
| 423 | size="sm" |
| 424 | label="Phone number" |
| 425 | hint="This is a hint text to help user." |
| 426 | leadingAddon={ |
| 427 | <NativeSelect |
| 428 | aria-label="Country" |
| 429 | options={[ |
| 430 | { value: "US", label: "US" }, |
| 431 | { value: "CA", label: "CA" }, |
| 432 | { value: "EU", label: "EU" }, |
| 433 | ]} |
| 434 | /> |
| 435 | } |
| 436 | > |
| 437 | <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" /> |
| 438 | </InputGroup> |
| 439 | <InputGroup |
| 440 | isRequired |
| 441 | isDisabled |
| 442 | size="sm" |
| 443 | label="Phone number" |
| 444 | hint="This is a hint text to help user." |
| 445 | leadingAddon={ |
| 446 | <NativeSelect |
| 447 | aria-label="Country" |
| 448 | options={[ |
| 449 | { value: "US", label: "US" }, |
| 450 | { value: "CA", label: "CA" }, |
| 451 | { value: "EU", label: "EU" }, |
| 452 | ]} |
| 453 | /> |
| 454 | } |
| 455 | > |
| 456 | <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" /> |
| 457 | </InputGroup> |
| 458 | <InputGroup |
| 459 | isRequired |
| 460 | isInvalid |
| 461 | size="sm" |
| 462 | label="Phone number" |
| 463 | hint="This is a hint text to help user." |
| 464 | leadingAddon={ |
| 465 | <NativeSelect |
| 466 | aria-label="Country" |
| 467 | options={[ |
| 468 | { value: "US", label: "US" }, |
| 469 | { value: "CA", label: "CA" }, |
| 470 | { value: "EU", label: "EU" }, |
| 471 | ]} |
| 472 | /> |
| 473 | } |
| 474 | > |
nothing calls this directly
no outgoing calls
no test coverage detected