Sanity UI looks brilliant 😃 Is something like the current date picker possible at the moment? I’m not sure if an icon can be used within a select element, which is how the...

3 replies
Last updated: Dec 21, 2020
Sanity UI looks brilliant 😃 Is something like the current date picker possible at the moment? I’m not sure if an icon can be used within a select element, which is how the Sanity studio is styled.
AI Update

Glad you're enjoying Sanity UI! 😊

Yes, you can absolutely add icons inside input components like the date picker using the prefix and suffix props that are available on Sanity UI's TextInput component. While there isn't a dedicated DatePicker component in @sanity/ui, you can build one using TextInput with icons.

Here's how you'd add an icon inside an input:

import {TextInput} from '@sanity/ui'
import {CalendarIcon} from '@sanity/icons'

<TextInput
  prefix={<CalendarIcon />}
  // or use suffix for right-side icon
  suffix={<CalendarIcon />}
/>

The prefix and suffix props accept any React.ReactNode, so you can use icons from @sanity/icons or any custom React component. This gives you full flexibility to style your inputs just like the Studio's native components.

For a full date picker experience, you'd typically combine TextInput with a Popover component to show a calendar interface. The community has built several date picker implementations using this pattern - you might want to check out plugins like sanity-plugin-date-input or similar for inspiration.

The Autocomplete component is another good example of how Sanity UI combines TextInput with icons and popovers to create more complex input patterns - you can use similar patterns for building custom date pickers!

We're in the midts of refactoring all the input sin the studio with Sanity UI. I'm not 100% sure it's 100% done, but here's the new and accessible one: https://github.com/sanity-io/sanity/blob/ui%2Fnext/packages/%40sanity/form-builder/src/inputs/DateInputs/base/DateTimeInput.tsx
These inputs will also be documented btw
Ahhh brilliant thank you Knut!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?